当前位置：首页 > article >正文

Vue常用指令

article 2025/3/4 2:37:22

1.指令：

HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

2.常用指令：

v-bind-绑定属性值，实现属性的动态变化
v-model-实现元素的双向数据绑定
v-on绑定事件(单击等)，实现事件发生调用方法
v-if v-else-if v-else相当于if-else的用法，条件性渲染元素，true渲染，否则不渲染
v-show相当于v-if条件判断后显示功能效果相同，但v-show会在vue后台源码显示，display为none时渲染，否则不渲染，两者渲染方式不同。
v-for循环遍历，加标签遍历
在这里插入图片描述

3.代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="vue2.0.js"></script>
</head>
<body>
    <div id="root">
        <div v-if="count ==3">a</div>
        <div v-else-if="count ==4">b</div>
        <div v-else>c</div><br>
       <!--实现视图和输入修改同步的功能，即双向绑定 -->
       <input v-model="count"><hr>
       <div v-show="count==3">div-show</div>
       <!-- 循环遍历addrs数组结果放入addr模板中，普通遍历 -->
       <div v-for="addr in addrs">
        <!-- 通过插值模板将数据取出 -->
        {{addr}}<hr>
       </div>
       <!-- 索引遍历：遍历数字编号,value-遍历内容 index-遍历索引,由0开始-->
       <div v-for="(value,index) in addrs">
        {{index+1}}-{{value}}
       </div>
        <!-- v-bind绑定href超链接,可以实现href的动态变化 -->
       <!-- -完整写法--> 
       <a v-bind:href="url">点击一下</a> 
       <!--简化写法--> 
       <a :href="url">点击一下</a>
       <!-- 双向数据绑定，实现数据的同步变化 -->
       <input v-model="url">
       <!-- v-on绑定点击事件，调用show方法 -->
       <input type="button" value="button1" v-on:click="show()"><br>
       <!-- 简化写法 -->
       <input type="button" value="button1" @click="show()"><br>
    </div>
    <script>
        new Vue({
            el:"#root",
            data(){
                return{
                    url:"https://www.baidu.com",//模型赋初值
                    count:3,
                    addrs:["北京","上海","西安"]//建立数组
                }
            },
            methods: {//定义方法
                show(){
                    alert("click me once!");
                }
            },
        })
    </script>
</body>
</html>