8个常用的Vue指令

8个常用的Vue指令

v-text

设置标签的文本值

<div id="app">
    <h2 v-text="message"></h2>
    <!-- v-text指令会替换标签中所有内容 -->
    <h2 v-text="message">学习</h2>
    <h2 v-text="message+'!!!'"></h2>
    <h2>{{message}}学习</h2>
    <h2>{{message+"!!!"}}</h2>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        message:"Vue"
    }
})

v-html

设置标签的innerHTML

<div id="app">
    <p v-html="content"></p>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        content:"<a href='#'>内容</a>"
    }
})

v-show

根据表达式的真假，切换元素的显示与隐藏

<div id="app">
    <h2 v-show="isShow">隐藏</h2>
    <!-- 可以使用表达式 -->
    <h2 v-show="!isShow">显示</h2>
    <h2 v-show="age>=18">age>=18显示</h2>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        isShow:false,
        age:18
    }
})

v-if

根据表达式的真假，切换元素的显示与隐藏

<div id="app">
    <h2 v-if="isShow">隐藏</h2>
    <h2 v-if="true">显示</h2>
    <h2 v-if="!isShow">表达式显示</h2>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        isShow:false
    }
})

v-if本质是通过操作dom元素来切换显示隐藏状态

v-show本质是基于CSS的display属性来切换显示隐藏状态

频繁的切换用v-show，反之使用v-if，因为前者的切换消耗小

v-bind

设置元素的属性（比如：src，title，class）

用法是v-bind:属性名，如v-bind:src=" "，也可以简写，省略v-bind，写成:src=" "

<div id="app">
    <img v-bind:src="imgSrc" >
    <h2 v-bind:title="tt">标题</h2>
    <!-- 也可以使用表达式 -->
    <h2 v-bind:title="tt+'!!!'">标题</h2>
    <img v-bind:border="bd" src="../imgs/computer.png">
    <img v-bind:border="bd==2?5:0" src="../imgs/computer.png">
    <!-- v-bind可以省略 -->
    <img :border="bd" :src="imgSrc">
</div>

var vue = new Vue({
    el:"#app",
    data:{
        imgSrc:"../imgs/computer.png",
        tt:"这是一个标题",
        bd:2
    }
})

v-for

根据数据生成列表结构

数组经常和v-for使用，语法是(item,index) in 数据名，item和index可以结合其他指令一起使用；数组长度的更新会同步到页面上，是响应式的。

<div id="app">
    <ul>
        <li v-for="n in arr">{{n}}</li>
        <li v-for="obj in objArr">{{obj.name}}</li>
        <!-- index从0开始 -->
        <li v-for="(obj,index) in objArr">{{index}}--{{obj.name}}</li>
    </ul>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3],
        objArr:[
            {name:"jack"},
            {name:"rose"}
        ]
    }
})

v-on

为元素绑定事件

<div id="app">
    <input type="button" value="单击事件绑定" v-on:click="event"/>
    <input type="button" value="鼠标指向事件绑定" v-on:mouseenter="event"/>
    <input type="button" value="双击事件绑定" v-on:dblclick="event"/>
    <!-- v-on:可以简写为@ -->
    <input type="button" value="双击事件绑定" @dblclick="event"/><br>
    <!-- 事件的后面跟上 .修饰符 可以对事件进行限制 -->
    <!-- .enter可以限制触发的按键为回车 -->
    <input type="text" @keyup.enter="event">
</div>

var vue = new Vue({
    el:"#app",
    methods:{
        event:function(){
            alert("事件");
        }
    }
})

v-model

获取和设置表单元素的值（双向数据绑定）

<div id="app">
    <input type="text" v-model="message">
    <!-- 双向数据绑定意思就改动其中一个另一个也会被改变 -->
    <h2>{{message}}</h2>
</div>

var vue = new Vue({
    el:"#app",
    data:{
        message:"双向数据绑定"
    }
})