学习使用vue.js（三）条件与循环 v-if、 v-for

<———
在这之前，你肯定会注意到上面箭头所指的位置，那么你一定会看见，文章外面的大拇指图标，动动你的手指，就能点一下它，表示你很喜欢这篇文章。

如果你不愿意多花时间去自学vue.js 官网的API，那么你可以在跟着下面的例子学习最实用、最容易上手的案例。

如果你还不会使用最基本的vue.js的话，推荐你先去看一下“1、2.学习使用vue.js（适合初学者）”然后再来学习以下内容：

正题：

条件与循环

v-if

<div id="app">
    <div v-if="msg">Hello Vue</div>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:true //这里为false 时 div便没有了，可以去审查一下元素，发现div真的‘变没了’
            }
        }
    })
</script>

第二个案例：

<div id="app">
    <h1 v-if="msg>10">我大于10</h1>
    <h1 v-else-if="msg<10">我小于10</h1>
</div>

data(){
    return {
        msg:11
    }
}

v-if如果条件不成立，那么vue不会把你的标签渲染到页面上。

v-show

<div id="app">
    <h1 v-show="msg>10">我大于10</h1>
</div>

data(){
    return {
        msg:9
    }
}

v-show如果条件不成立，那么vue会自动的在你的元素标签上加一个display:none; 如果条件成立，则会添加一个display:block;

v-for 指令可以绑定数组的数据来渲染一个项目列表（通俗的说就是循环数组）

<div id="app">
    <ul>
        <li v-for="data in this.msg">//这里可以写this.msg 也可以直接写msg,我习惯写this.msg
            <h1>名字：{{data.name}}</h1>
        </li>
    </ul>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:[
                    {name:'苹果'},
                    {name:'香蕉'},
                    {name:'桃子'}
                ]
            }
        }
    })
</script>

当然你也可以直接循环绑定src，你只需要把图片的路径写到msg里面，然后

<img :src="data.src">

其他的绑定小伙伴们可以自己试试哈

文章持续跟新中。。。
请持续关注。。。。
如果你想学习的话，请关注我的文章“学习使用vue.js”系列
让我们共同进步~

上一篇：学习使用vue.js（二）声明式渲染和指令绑定
http://blog.csdn.net/heshuaicsdn/article/details/79196678

下一篇：学习使用vue.js（五）绑定Style 与Class
http://blog.csdn.net/heshuaicsdn/article/details/79199824

学习使用vue.js（三）条件与循环 v-if、 v-for

猜你喜欢