vue指令之 v-fo循环和 v-show 以及key值的用法
一、v-for指令
下文用四个案例来分别解析，包括循环普通数组，循环对象数组、循环对象以及 数字迭代。
<body>
<div id="add">
<!-- v-for 循环普通数组 (num,int) 其中的第一个值表示内容，第二个值为索引。如果只填写内容，则修改v-for循环的内容为 num in list-->
<p v-for="(num,int) in list">内容为：{{ num }}----索引为:{{int}}</p>
<!-- v-for 循环对象数组 如果添加索引，则通过（index，i） in list1，其中i，第二个值表示的索引，在其中调用。-->
<p v-for="index in list1">获取id：{{index.id}}------获取内容: {{index.name}} </p>
<!-- v-for 循环对象 在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 ，这个值可以添加，也可以不添加-->
<p v-for="(val,key,i) in user">键名：{{key}}-------内容：{{val}}</p>
<!-- in 后面可以放 普通数组，对象数组，对象， 还可以放数字 -->
<!-- v-for 迭代数字 注意：如果使用 v-for 迭代数字的话，前面的 num 值从 1 开始-->
<p v-for="num in 10">这是第{{num}}次想你</p>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#add',
data:{
list: [1,2,3,4,5,6],
list1:[
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
],
user: {
id: 1,
name: '托尼·屎大颗',
gender: '男'
}
},
methods:{}
});
</script>
二、对key值的用法
key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值，key值的类型只有两种，数字类型或者字符串类型。
<body> <div id="app"> <div> <label>Id: <input type="text" v-model="id"> </label> <label>Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string --> <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --> <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 --> <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '李斯' }, { id: 2, name: '嬴政' }, { id: 3, name: '赵高' }, { id: 4, name: '韩非' }, { id: 5, name: '荀子' } ] }, methods: { add() { // 添加方法 //.unshift() 向数组的开头添加一个或更多元素,并返回新的长度。 //.push() 向数组的结尾添加一个或更多元素,并返回新的长度。 this.list.unshift({ id: this.id, name: this.name }) } } }); </script> </body>
三、v-if和v-show的用法和区别
v-if 的特点：每次都会重新删除或创建元素 -->
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式
优缺点：v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
使用条件：如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
<body>
<div id="mas">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var mas = new Vue({
el : "#mas",
data:{
flag:true
},
methods:{
// toggle(){
// this.flag = !this.flag
// }
}
})
</script>
