Vue的简单指令

• v-if 根据表达式的值的真假条件渲染元素
• v-for 列表渲染，绑定数据到数组渲染成一个列表
• @click 是v-on:click的简写，绑定事件监听
• v-model 在表单控件输入和应用状态中做双向数据绑定
• v-bind 在变量与属性值直接的数据绑定

重点说一下v-for:

1.用法：用于列表的编写，绑定数据到数组来渲染一个列表，譬如ul,ol等等

2.源码：

<div id="app-4">
    <ol>
	<li v-for="x in list1">
	    {{x}}
	</li>
    </ol>
    <ul>
        <li v-for="x in list2">
            {{x.name}}
        </li>
    </ul>
</div>

var app4=new Vue({
    el:'#app-4',
    data:{
        list1:['Alice','Charles','Mills','Marry'],
        list2:[
            {name:'One'},
            {name:'Two'},
            {name:'Three'}
        ]
    }
})

3.如何在数组末尾增加一个元素： 在控制台中输入：app4.list1.push('Hello')和app4.list2.push({name:'Four'})