vue 指令

最新推荐文章于 2025-04-22 21:04:40 发布

章鱼保罗nice

最新推荐文章于 2025-04-22 21:04:40 发布

阅读量500

点赞数

分类专栏： vue JavaScript

本文链接：https://blog.youkuaiyun.com/zbx13128814051/article/details/78269391

版权

JavaScript 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

文章是基于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>