v-for和修饰符
v-for
<div id="app">
<button @click="flag=!flag">toggle</button>
<ul>
<!-- item表示数据里面的每一项 -->
<!-- index表示数据里面的每一项的索引 -->
<!-- <li v-for="(item,index) in list" :key="item">{{item}}----{{index}}</li> -->
<!-- 如果对这个li进行删除操作的时候，
比如把第1个删了 ，那么第二个li就会成为第一个
所以index的值不是固定，不利于性能
-->
<!-- 写一个数组 数组里面有对象 对象里面 有name id age 分别展示到页面上 -->
<!-- v-for 和 v-if 是不推荐写在一个元素上的 如果非要这样那请使用template -->
<!-- template是html5提供的标签 代表一个没有意义的 不会在dom上展现的元素
作用是 可以给元素再包上一层 -->
<!-- <template v-if="flag">
<li v-for="(r,i) in objList" :key="r.id" >
姓名：{{r.name}}
年龄：{{r.age}}
</li>
</template> -->
<!-- 在外面是获取不到r的值的 -->
<!-- <template v-if="r.isShow"> -->
<!-- v-for 比 v-if的等级要高 在一起写会造成不必要的性能浪费 -->
<!-- <li v-for="(r,i) in f" :key="r.id" >
姓名：{{r.name}}
年龄：{{r.age}}
</li> -->
<!-- </template> -->
<!-- 在脚手架中使用 会出现警告 -->
<!-- <li v-for="(r,i) in objList" :key="r.id" v-if="r.isShow" >
姓名：{{r.name}}
年龄：{{r.age}}
</li> -->
</ul>
</div>
<script src="./vue2.6.14.js"></script>
<script>
/* vue是数据驱动视图 先有数据 */
let vm = new Vue({
el: "#app",
/* 计算属性 是用来把data中的数据进行处理的 */
computed:{
f:function (){
return this.objList.filter(r=>r.isShow);
}
},
data: {
list: [
'我是软件大道的程序员1',
'我是软件大道的程序员2',
'我是软件大道的程序员3',
'我是软件大道的程序员4',
'我是软件大道的程序员5'
],
flag: false,
objList: [{
name: "张三",
id: "01",
age: 20,
isShow: true
}, {
name: "李四",
id: "02",
age: 28,
isShow: false
}, {
name: "王五",
id: "03",
age: 29,
isShow: true
}]
},
methods: {
}
});
</script>
修饰符
