vue 指令

来源：互联网发布：950x120淘宝店招图编辑：程序博客网时间：2024/05/29 11:54

文章是基于vue 2.0

相信很多人学习vue最先接触的是vue指令，Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性。

接下来分别介绍vue的一些常用指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令

1.v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

代码：

<html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div id="app">            <p>Hello, Vue.js!</p>            <p v-if="yes">Yes!</p>            <p v-if="no">No!</p>            <p v-if="age >= 25">Age: {{ age }}</p>            <p v-if="name.indexOf('jack') >= 0">Name: {{ name }}</p>        </div>    </body>    <script src="js/vue.js"></script>    <script>                var vm = new Vue({            el: '#app',            data: {                yes: true,                no: false,                age: 28,                name: 'keepfool'            }        })    </script></html>

效果：

2.v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div id="app">            <p>Hello, Vue.js!</p>            <p v-show="yes">Yes!</p>            <p v-show="no">No!</p>            <p v-show="age >= 25">Age: {{ age }}</p>            <p v-show="name.indexOf('jack') >= 0">Name: {{ name }}</p>        </div>    </body>    <script src="js/vue.js"></script>    <script>        var vm = new Vue({            el: '#app',            data: {                yes: true,                no: false,                age: 28,                name: 'keepfool'            }        })    </script></html>

效果：

3.可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须紧跟在v-if或v-else-if元素的后面——否则它不能被识别。

代码：

<html><head>    <meta charset="UTF-8">    <title></title></head><body><div id="app">    <p v-if="age >= 29">Age: {{ age }}</p>    <p v-else>Name: {{ name }}</p>    <p>---------------------分割线---------------------</p>    <p v-if="name.indexOf('fool') < 0">Name: {{ name }}</p>    <p v-else-if="name.indexOf('fool') == 0">Name: {{ name }}</p>    <p v-else>Sex: {{ sex }}</p></div></body><script src="js/vue.js"></script><script>    var vm = new Vue({        el: '#app',        data: {            age: 28,            name: 'keepfool',            sex: 'Male'        }    })</script></html>

效果：

4.v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for="item in items"
items是一个数组，item是当前被遍历的数组元素。

代码：

<html><head>    <meta charset="UTF-8">    <title></title></head><body><div id="app">    <ul>        <li v-for="item in items">{{item.fruit}}</li>    </ul></div></body><script src="js/vue.js"></script><script>    var vm = new Vue({        el: '#app',        data: {            items:[                {fruit: "apple"},                {fruit: "banana"},                {fruit: "orange"}            ]        }    })</script></html>

效果：

5.v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-bind:argument="expression"
代码：

<ul class="pagination">  <li v-for="n in pageCount">     <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>  </li></ul>

6.v-on 用于监听指定元素的DOM事件，比如点击事件：<a v-on:click="doSomething">
代码：

<div id="example04">        <input type="text" v-model="message">        <button v-on:click="greet">Greet</button>        <!-- v-on指令可以缩写为@符号-->     <button @click="greet">Greet Again</button>    </div><script>    var exampleData04={        message:"Nice meeting U"    };    var vm2=new Vue({        el:"#example04",        data:exampleData04,        methods:{            greet:function(){                alert(this.message);            }                 }    })</script>

阅读全文

0 0