Vue指令

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_34236497

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yc-1314/p/10189890.html

指令是指特殊的带有前缀v-的特性。指令的值限定为绑定表达式，指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。

一、内部指令

1.v-if

　　v-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中。代码实例如下：

<body class="native">
    <div id="example">
        <p v-if="greeting">Hello</p>
    </div>
</body>
<script>
    var exampleVM2 = new Vue({
        el:'#example',
        data:{
            greeting:false
        }
    })
</script>

　　效果如图所示：

2.v-show

　　v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素将被隐藏。查看DOM时，会发现元素上多了一个内联样式style=“displa：none”。代码示例如下:

<body>
    <div id="example">
        <p v-show="greeting">Hello!</p>
    </div>
</body>
<script>
    var exampleVM2 = new Vue({
        el:'#example',
        data:{
            greeting:false
        }
    })
</script>

效果如图所示：

　　在切换v-if模块时，Vue.js有一个局部编译/卸载过程，因为v-if中的模板可能包括数据绑定或子组件。v-if是真实的条件渲染，因为它会确保条件块在切换时合适地销毁与重建条件块内的事件监听器和子组件。

　　v-if是惰性的--如果初始渲染时条件为假，则什么也不做，在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

　　相比之下，v-show简单得多--元素始终被编译并保留，只是简单地基于CSS切换。

　　一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

　　3.v-model

　　v-model指令是用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。尽管有点神奇，但是v-model不是语法糖，在用户输入事件中更新数据，以及特别处理一些极端例子。代码示例如下:

<body id="example">
    <form>
        姓名:
        <input type="text" v-model="data.name">
        <br/>
        性别:
        <input type="radio" id="man" value="One" v-model="data.sex">
        <label for="man">男</label>
        <input type="radio" id="male" value="One" v-model="data.sex">
        <label for="male">男</label>
        <br>
        兴趣:
        <input type="checkbox" id="book" value="book" v-model="data.interest">
        <label for="book">阅读</label>
        <input type="checkbox" id="swim" value="swim" v-model="data.interest">
        <label for="swim">游泳</label>
        <input type="checkbox" id="game" value="game" v-model="data.interest">
        <label for="game">游戏</label>
        <input type="checkbox" id="song" value="song" v-model="data.interest">
        <label for="song">唱歌</label>
        <br>
        身份:
        <select v-model="data.identity">
            <option value="teacher" selected>教师</option>
            <option value="doctor">医生</option>
            <option value="lawyer">律师</option>
        </select>
    </form>
</body>
<script>
    new Vue({
        el:'#example',
        data:{
            data:{
                name:"",
                sex:"",
                interest:[],
                identity:''
            }
        }
    })
</script>

　　效果如下图所示：

4.v-for

我们使用v-for指令基于源数据重复渲染元素。我们也可以使用$index来呈现相对应的数组索引，代码示例如下:

<body id="example">
    <ul id="demo">
        <li v-for="item in items" class="item-{{$index}}">
            {{$index}}-{{parentMessage}} {{item.msg}}
        </li>
    </ul>
</body>
<script>
    var demo = new Vue({
        el:'#demo',
        data:{
            items:[
                parentMessage:'滴滴',
                {msg:'滴滴顺风车'},
                {msg:'滴滴专车'}
            ]
        }
    })
</script>