<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue基础2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
<!-- 一、条件渲染: v-if | v-else-if | v-else | v-show -->
<div v-if="testIf">我是根据v-if来显示的</div>
<div v-else>若v-if为false的话我就出现了</div>
<template v-if="testIf1">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<!-- 用key管理可以复用的元素 -->
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="changeLoginType">切换登录方式</button>
<!-- v-show: v-show 不支持 <template> 元素，也不支持 v-else,带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display -->
<!-- v-if vs v-show:
1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
3、v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
4、一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好 -->
<!-- 二、列表渲染 v-for -->
<!-- 把一个 数组 对应为一组元素,我们也可以用of代替in，因为它是最接近 JavaScript 迭代器的语法 -->
<ul>
<!-- 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 -->
<li v-for="item in nameList" :key = "item.id">{{item.name}}</li>
<!-- <li v-for="(item, index) in nameList">{{item.name}}</li> -->
</ul>
<button @click="changeItem">改变nameList</button>
<!-- 一个对象中的v-for,可以通过一个对象的属性来迭代 -->
<ul>
<li v-for="(value, key, index) in nameDetail" :key = "index">{{index}}. {{key}}: {{value}}</li>
</ul>
<div>
<span v-for="n in evenNumbers">{{n}}</span>
</div>
<!-- v-for 也可以取整数。在这种情况下，它将重复多次模板。12345678910 -->
<div>
<span v-for="n in 10">{{n}}</span>
</div>
<!-- v-for 与 v-if: v-for的优先级较高，也就是说v-if中可以使用 item;所以会在每一个循环中执行 v-if。若是有条件的跳过循环的执行，那么将 v-if 放到外层循环中（模板中） -->
<ul>
<li v-for="item in nameList" v-if="item.id==2">{{item.name}}</li>
</ul>
<!-- 在自定义组件里，你可以像任何普通元素一样用 v-for -->
</div>
<script>
var data = {
testIf: true,
testIf1: true,
loginType: 'username',
// 可以对数组使用push(),pop(),splice(),shift(),unshift(),sort(),reverse等
// 注意：不能利用索引直接设置一个项，eg: item[1] = newValue;不是响应式的
// 当你修改数组的长度时，例如：vm.items.length = newLength也不是响应式的
nameList: [
{ id: 1, name: 'Li Ming' },
{ id: 2, name: 'Zhang San' },
{ id: 3, name: 'Li Si' }
],
// 对象更改检测
nameDetail: {
name: 'Liu Hong',
age: 25,
birthday: '1994-11-30'
},
numbers: [1,2,3,4,5]
};
var app = new Vue({
el: '#app',
data,
methods: {
changeLoginType: function() {
this.loginType = this.loginType == 'username' ? 'email' : 'username'
return this.loginType;
},
//利用索引值更改一个项时 Vue.set || app.$set, index不能超过原有数组index+1的最大值，如本例子将2改为4就会报错
changeItem: function() {
app.$set(data.nameList, 2, { 'id': 4, 'name': "李明" });
// app.$set(this.nameDetail, 'sex', '女'); //与下面结果相同
// 下面两种结果相同，区别是是什么？？？？？？？？？为什么Vue建议使用第一种，为已有对象赋予新属性，如果想要添加新的响应式属性。
this.nameDetail = Object.assign({}, this.nameDetail, {
sex: '女'
});
// this.nameDetail = Object.assign(this.nameDetail, {
// sex: '女'
// });
}
},
computed: {
// 显示过滤、排序结果
// 我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
});
</script>
</body>
</html>