1、条件
条件判断使用 v-if 指令。
<template> <div id="app"> <div v-if="flag">你能看到我吗？</div> </div> </template> <script> export default { data() { return { //true：显示 flag: false } } } </script>可以用 v-else 指令给 v-if 添加一个 "else" 块
<template> <div id="app"> <div v-if="flag">你能看到我吗？</div> <div v-else>你能看到我</div> </div> </template> <script> export default { data() { return { flag: false } } } </script>v-else-if 在 2.1.0 新增，用作 v-if 的 else-if 块
<template> <div id="app"> <div v-if="type==='A'">我是A</div> <div v-else-if="type==='B'">我是B</div> <div v-else-if="type==='C'">我是C</div> </div> </template> <script> export default { data() { return { type: 'A' } } } </script>可以使用 v-show 指令来根据条件展示元素
<template> <div id="app"> <div v-show="flag">我显示出来吧</div> </div> </template> <script> export default { data() { return { //true：显示 flag: true } } } </script>2、循环
循环使用 v-for 指令
<template> <div id="app"> <table> <tr> <td>新闻标题</td> <td>作者</td> </tr> <tr v-for="item in news"> <td>{{item.title}}</td> <td>{{item.author}}</td> </tr> </table> </div> </template> <script> export default { data() { return { news: [ {title: '新闻一', author: '张三'}, {title: '新闻二', author: '李四'}, {title: '新闻三', author: '王五'}, {title: '新闻四', author: '赵六'} ] } } } </script>也可以提供第二个的参数为索引
<template> <div id="app"> <table> <tr> <td>序号</td> <td>新闻标题</td> <td>作者</td> </tr> <tr v-for="(item,key) in news"> <td>{{key}}</td> <td>{{item.title}}</td> <td>{{item.author}}</td> </tr> </table> </div> </template> <script> export default { data() { return { news: [ {title: '新闻一', author: '张三'}, {title: '新闻二', author: '李四'}, {title: '新闻三', author: '王五'}, {title: '新闻四', author: '赵六'} ] } } } </script>
