7. Vue的vue-if和vue-for标签
官网例子: https://cn.vuejs.org/v2/guide/conditional.html
v-if 条件判断
- 代码展示
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<input type="checkbox" v-model="ok"/>agree
<!-- v-if v-else 条件渲染 -->
<h2 v-if="ok">i am agree with you </h2>
<h2 v-else>i am disagree with you</h2>
</div>
<script>
new Vue({
el: "#app",
data:{
ok: true
}
})
</script>
</body>
- 页面展示
简单的v-for遍历
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<ul>
<!-- 变量为n 循环10次 -->
<li v-for="n in 10">{{n}}</li>
</ul>
<ol>
<li v-for="(n,index) in 10">-----{{index}}</li>
</ol>
</div>
<script>
new Vue({
el: "#app",
data:{
}
})
</script>
</body>
相对简单的v-for遍历
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data:{
userList:[
{id:1,username:"xuan",age:10},
{id:2,username:"didi",age:5},
{id:3,username:"gege",age:15}
]
}
})
</script>
</body>