简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Vue中常用的指令总结

不言
Lepaskan： 2018-07-26 12:53:23
asal
1433 orang telah melayarinya

 本篇文章分享给大家的内容是关于Vue中常用的指令总结，内容很详细，接下来我们就来看看具体的内容，希望可以帮助到有需要的朋友。

1 常用指令

  • v-if指令

  • v-show指令

  • v-else指令

  • v-for指令

  • v-bind指令

  • v-model

  • v-on指令

  • v-text指令

1.1 v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"
Salin selepas log masuk

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>
Salin selepas log masuk

显示结果如下、

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

1.2 v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：

v-for="item in items"
Salin selepas log masuk

items是一个数组，item是当前被遍历的数组元素。

示例代码：


    

        

            
                

                    name
                    age
                


            
            
                

                     {{item.name}}
                     {{item.age}}
Salin selepas log masuk

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

v-bind:argument="expression"
Salin selepas log masuk

1.4 v-model

v-model（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 及