Vue——指令

v-for

专门用于迭代的指令。

实例

字符串

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

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

js
new Vue({
    el: '#app',
    data: {
        foodList: ['麦辣鸡腿堡','甜筒','薯条'],
    }
})

html
<div id = 'app'>
    <ul>
        <li v-for="food in foodList">{{food}}</li>
    </ul>
</div>

对象

js data

foodList: [
    {
        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'
}