Vue简单学习之关于 html 标签属性 v-for, v-if, v-show使用
傅玮
-
v-for 循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 注意： v-for 循环的时候，key 属性只能使用number 和string key 在使用的时候，必须使用v-bind/ : 进行绑定，指定key 的值 key 在循环中保证数据的唯一性 --> <!-- 遍历普通数组--> <p v-for="(item,i) in datas" :key="i"> datas[ {{i}} ]--- {{item}} </p> <!-- 遍历 对象数组--> <p v-for="(user, i) in datas2" :key="user.id"> Id {{user.id}} 姓名 {{user.name}} --- {{i}} </p> <!-- 遍历对象--> <p v-for="(val,key) in user" :key="key"> {{key}} --- {{val}} </p> <!-- 迭代数字 : 从1 开始--> <p v-for="cout in 10"> {{cout}} </p> </div> </body> <script> var vm = new Vue({ el: "#app", data: { datas: [1, 2, 4, "hello world", 'c'], //普通数组 datas2: [{ id: 1001, name: "zhangsan" }, { id: 1002, name: "lisi" }, { id: 1003, name: "wangwu" }], user: { "id": "1001", "name": "zhangsan", "age": 12, } }, methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法 } }) </script> </html> -
v-if 和v-show 的区别
v-if 的特点： 每次都会创建或删除 元素 ，有较高的切换性能消耗
v-show 的特点： 每次不会重新进行DOM 的删除和创建操作，只是切换了元素的display 样式； 有较高的初始化渲染消耗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
效果: 当flag 为true 的时候，显示 当flag 为false的时候，不显示
v-if 的特点： 每次都会创建或删除 元素 ，有较高的切换性能消耗
v-show 的特点： 每次不会重新进行DOM 的删除和创建操作，只是切换了元素的display 样式； 有较高的初始化渲染消耗
-->
<input type="button" v-model:value="btnValue" @click="change">
<p v-if="flag">Hello world </p>
<p v-show="flag">Hello world </p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
btnValue: "显示",
},
methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
change() {
this.flag = !this.flag;
if (this.flag) {
this.btnValue = "不显示"
} else {
this.btnValue = "显示"
}
}
}
})
</script>
</html>
类似资料：