教你短时间内学完VUE.js教程二（条件/循环）

 

条件语句：

条件判断使用v-if指令

<!--if循环-->
<div id="app">
    <h1 v-if="2333">啊哩哩！</h1>
    <template v-if="ok">
        <p>拼命的学习</p>
        <p>鞭策的学习</p>
        <p>痛定思痛的学习</p>
        <p>学习！！！</p>
    </template>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            2333:true,
            ok:true
        }
    })
</script>

例图：

 

用v-else指令给v-if添加一个“else”块：

<!--else代码块-->
<div id="app">
    <div v-if="Math.random()>25.5"></div>
    <div v-else>‘yo’西语里是“我”的意思</div>
</div>
<script>
    new Vue({
        el: '#app'
    })
</script>

例图：

 

用作v-if的else-if块，可以链式的多次使用：

<!--v-else-if:v-else-if在v-if之前，在v-else之后；-->
<div id="app">
    <p v-if="one==='me'">me</p>
    <p v-else-if="one==='yo'">yo</p>
    <p v-else-if="one==='I'">I</p>
    <p v-else>西语里‘我’ me/yo/I</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            one:'yo'
        }
    })
</script>

例图：

 

用v-show指令来根据条件展示元素：

<!--使用v-show指令来根据条件展示元素-->
<div id="app">
    <p v-show="yo">我</p>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            yo:true
        }
    })
</script>

例图：

循环语句：

v-for指令需要以site in sites形式的特殊语法，v-for可以绑定数据到数组来渲染一个列表

<div id="app">
    <ul>
        <template v-for="site in sites">
            <li>{{site.name}}</li>
            <li>中文，英语，西语</li>
        </template>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            sites: [
                {name: '你'},
                {name: 'you'},
                {name: 'tu'}
            ]
        }
    })
</script>

例图：

 

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

<div id="app">
    <ul><!--(value, key)在这里可以加参数-->
        <li v-for="value in object">{{value}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            object: {
                Chinese: '他',
                English: 'he;him;their',
                Spanish: 'el'
            }
        }
    })
</script>

例图：

 

v-for循环整数

<div id="app">
    <ul>
        <li v-for="n in 10">{{n}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app'
    })
</script>

例图：

 

参考于菜鸟教程网