v-show 和 v-if
当条件为false，
v-if会将DOM中的节点删除
v-show只是给元素加了一个元素样式：display：none
如果切换频繁使用 v-show
当只有一次切换使用v-if
v-for 循环遍历
<ul>
<!-- 遍历过程中没有使用下标值-->
<li v-for="item in movies">{{item}}</li>
<!-- 在遍历的过程中获取下标值-->
<li v-for="(item, index) in movies">{{index+1}} {{item}}</li>
</ul>
<ul>
<!-- 在遍历对象过程中，如果只是获取一个值，那么获取的时value-->
<li v-for="item in peoples">{{item}}</li>
<!-- 如何获取key和value (value, key , index)-->
<li v-for="(value, key) in peoples">{{value}}-{{key}}</li>
</ul>
movies:['海王', '天线宝宝', '海贼王', '火影忍者'],
peoples:{
name:'why',
age: 18,
height: 1.88
},
数组的那些方法能实现响应式那些不能
<div id="app">
<ul>
<!-- 加key性能更高-->
<li v-for="letter in letters">{{letter}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
letters:['A','B','C','D']
},
methods:{
sum(...sum){
// ...sum可以传入多个元素，可变参数, 以逗号形式传（'a', 'b', 'c'）
},
btnClick(){
// 1.数组的响应式方法
// push方法在数组最后添加元素可以加多个
this.letters.push('E')
// pop方法删除数组最后元素
this.letters.pop()
// shift方法删除数组第一个元素
this.letters.shift()
// unshift方法在数组最前面添加元素可以加多个
this.letters.unshift('F', 'G')
// splice方法 (start, length, content )
// start 起始位置
// length ： 表示删除几个元素 若不写删除之后所有
// 若是 0则表示添加
// content ：替换的内容
this.letters.splice()
// sort方法 排序
this.letters.sort()
// reverse方法
// this.letters.reverse()
//修改数组
Vue.set(this.letters,0,'bbbb')
// 2.不是响应式
// 通过索引值修改数组的元素,不能做到
this.letters[0] = 'a'
}
}
})
</script>
