Vue——指令

v-for

专门用于迭代的指令。

实例

字符串

假设我们有一个foodList在data里面，使用v-for进行迭代，变量名为food。

记住，xxxList，变量名就是xxx。

jsnew Vue({    el: '#app',    data: {        foodList: ['麦辣鸡腿堡','甜筒','薯条'],    }})html<div id = 'app'>    <ul>        <li v-for="food in foodList">{{food}}</li>    </ul></div>

对象

js datafoodList: [    {        name: '麦辣鸡腿堡',        price:'20',        discount: .88    },    {        name: '甜筒',        price:'4',        discount: .5    },    {        name: '薯条',        price:'6',        discount: .5    },]html<li v-for="food in foodList">{{food.name}}：￥{{food.price * food.discount}}</li>

v-bind

用于绑定 数据和元素属性。

也可以省略为 ：

实例

元素属性

以前是这样<a href = "http://www.baidu.com"></a>Vue<a v-bind:href = "url">data: {    url: 'http://www.baidu.com'}

条件加类

条件为真，才添加类。

             // 要添加的类   条件<p v-bind:class="{active: isActive}" >点我</p>data: {    isActive: true}

v-on

用于绑定事件。

方法在methods里面定义。

可以简写成@

实例

绑定一个事件

             <!--click时调用onClick方法--><button v-on:click="onClick">点我</button>new Vue({    el: '#app',    methods: {        onClick: function(){            console.log('clicked')        }    }})

绑定多个事件

<button v-on="{mouseenter: onEnter ,mouseleave: onOut}">点我</button>methods: {    onEnter: function(){        console.log('mouse enter')    },    onOut: function(){        console.log('mouse leave')    }}

修饰符prevent

提交表单不再重载页面

                //在这里添加 <form v-on:submit.prevent= "onSubmit">    <input type="text">    <button type = "submit">提交</button></form>

v-model

用于表单数据的绑定。

实例

简单实例

//绑定data里的数据name<input type="text" v-model = "name">//这个这是用于展示{{name}}data:{    name: 'Tim Chen'}

单选按钮

v-model绑定一样的data变量，设置不一样的值

<label>    男    <input v-model = "sex" value="male"  type = "radio"></label><label>    女    <input v-model = "sex" value="female" type = "radio"></label><br/>{{sex}}data:{    sex: 'male'}

复选

sex变为一个数组，input的type更改为checkbox。

data:{      sex: []}

select

<h1>你来自哪里？</h1><select  v-model= "from" >    <option value="1">地球</option>    <option value="2">外星球</option></select>data:{    from: 1}

控制流指令

v-if、v-else、v-else-if

实例

<div v-if="role == 'admin' ">    <p>你好，管理员</p></div><div v-else-if="role == 'hr' ">    <p>你好，hr</p></div><div v-else>    <p>你没有权限访问此页面</p></div>data:{    role: 'admin'}