2020/9/9 凪辉机的vue学习笔记--------------条件与循环指令

条件与循环指令

一、条件指令：
先写出view部分

<div class="app">
        <h1 v-if="kejian">hello {{msg}}</h1>
    </div>

再写出model部分：

new Vue({
        el:".app",//el后为关联的view，是类似于一个CSS的选择器
        data:{
            msg:"abc!",
            kejian:true//设置可见的属性，true为可见，false为不可见
        }
    });

二、循环指令：
View部分：所以需要将li循环来存放model部分的data

<div id="app-4">
  <ol>
    <li v-for="item in todos">{{item.text}}</li>//需要循环li标签来放入四组数据
  </ol>
</div>

Model部分：
这一部分有四组数据，需要有4个li来存放

new Vue({
    el: '#app-4',——选择div节点
    data: {
        todos: [
                { text: '学习 JavaScript' },
                { text: '学习 Vue' },
                { text: '整个牛项目' },
                { text: 'jin tian chi diansha ' }//这一部分有4组数据
            ]
        }
    })

若要添加li则直接修改model部分中的data即可。相比于JS的循环更加简便。

指令：在vue中指令有明显的特点，以“v-”开头。