v-for指令
- 迭代数组
- 遍历对象：遍历对象身上的键值对的时候，除了有val key ,在第三个位置还有一个索引
- 迭代数字：遍历从1开始
- in 后可以放 普通数组，对象数组，对象，数字
- key属性的使用
- key属性只能使用string/number
- key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字作为key
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用v-for</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- 迭代数字 -->
<!-- <div id="app">
<p v-for="count in 10">{{ count }}</p>
</div> -->
<!-- 迭代对象数组 -->
<div id="app">
<input type="text" :value="id" v-model="id">
<input type="text" :value="name" v-model="name">
<input type="button" value="添加" @click="addStu">
<p v-for="stu,index in students" :key="stu.id">
<input type="checkbox" > {{ index }} ------ {{ stu.id }} -------- {{ stu.name }}
</p>
</div>
<!-- 迭代对象 -->
<!-- <div id="app">
<p v-for="val,key in student">{{ key }} -------- {{ val }}</p>
</div> -->
<script>
var vm = new Vue({
el : '#app',
data : {
id: '',
name: '',
students : [
{id : 1, name : 'zhangsan'},
{id : 2, name : 'lisi'},
{id : 3, name : 'wangwu'}
],
student : {
id : 1,
name : 'zhangsan'
}
},
methods: {
addStu(){
// this.students.push({ id: this.id, name: this.name });
this.students.unshift({ id: this.id, name: this.name });
}
}
})
</script>
</body>
</html>
v-if和v-show指令的使用
- v-if ：每次都会重新删除或创建元素
- v-show: 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式
- v-if有较高的切换性能消耗，v-show有较高的初始渲染消耗
- 如果元素涉及到频繁的切换，最好不要使用v-if，推荐使用v-show。如果元素可能永远也不会被显示出来被用户看到则推荐使用v-if
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if和v-show</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="flag = !flag">
<div v-show="flag">
show内容显示
</div>
<p></p>
<p></p>
<p></p>
<div v-if="flag">
if内容显示
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
flag : true
}
})
</script>
</body>
</html>
网友评论