Vue.js条件、循环语句

条件语句

v-if

在元素 和 template 中使用 v-if 指令

<div id="app"><p v-if="seen">现在你看到我了</p><template v-if="ok"><p>学的不仅是技术，更是梦想！</p></template>
</div> 
<script>new Vue({el: '#app',data: {seen: true,ok: true}})
</script>

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

v-else

随机生成一个数字，判断是否大于0.5，然后输出对应信息

<div id="app"><div v-if="Math.random() > 0.5">Sorry</div><div v-else>Not sorry</div>
</div>   
<script>new Vue({el: '#app'})
</script>

v-else-if

判断 type 变量的值

<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 v-else>Not A/B/C</div>
</div>
<script>new Vue({el: '#app',data: {type: 'C'}})
</script>

注：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

也可以使用 v-show 指令来根据条件展示元素

<h1 v-show="ok">Hello!</h1>

循环语句

v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

<div id="app"><ol><li v-for="site in sites">{{ site.name }}</li></ol>
</div><script>new Vue({el: '#app',data: {sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]}})
</script>

模板中使用 v-for

<ul><template v-for="site in sites"><li>{{ site.name }}</li><li>--------------</li></template>
</ul>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据

value

第一个参数为属性值

<div id="app"><ul><li v-for="value in object">{{ value }}</li></ul>
</div><script>new Vue({el: '#app',data: {object: {name: '菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}})
</script>

value ,key

第二个的参数为键名

<div id="app"><ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul>
</div>

value ,key，index

第三个参数为索引

<div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul>
</div>

v-for 迭代整数

循环整数

<div id="app"><ul><li v-for="n in 10">{{ n }}</li></ul>
</div>

以上内容来自菜鸟教程