Vue的常用指令_vue指令也是标签属性的一种吗-CSDN博客

本文链接：https://blog.csdn.net/weixin_44950875/article/details/130477404

一、什么是指令

vue指令就是在vue中使用v-前缀的特殊属性，指令就是用来扩展在vue中标签的功能，在模板中添加响应的行为，它本质上还是标签的属性

语法：v-指令=“指令值” ，一般写在开标签中

二、指令有那些

v-if,v-else,v-else if：根据表达式的值，条件式的渲染Dom元素，v-if的条件为真时显示元素，条件为假时显示v-else的元素，三者一起使用的时候要注意顺序，先使用v-if，然后使用v-else-if，最后使用v-else，在执行时，先判断v-if的条件是否为真，条件为真显示v-if绑定的元素，条件为假判断v-else-if的条件是否为真，条件为真显示v-else-if绑定的元素，如果v-if和v-else-if的条件都不满足，最后会执行v-else绑定的元素

下面通过一个小案例来体会该指令实现的效果：

<template>
    <div>
        <h1>if的使用</h1>
        <hr>
        <div v-if="bool">我是哈哈哈</div>
        <div v-else>我是嘻嘻嘻</div>
        <button @click="fun()">点我修改值</button>
    </div>
</template> 
export default{
    components: {
        
    },
    data() {  
        return {
            bool:true,  //初始值为真
        }
    },
    methods: {
       fun(){
            this.bool=false  //点击后修改初始值为假
       }
    }
}

效果展示：
在这里插入图片描述

在点击按钮后触发函数，修改初始值，初始化的值发生了改变，显示“我是嘻嘻嘻”，“我是哈哈哈”为`true`时显示，“我是嘻嘻嘻”为false时显示

在这里插入图片描述

v-if和v-else-if，v-else三者一起使用

<template>
  <div>
    <select v-model="selectval">
      <option value="篮球">篮球</option>
      <option value="唱歌">唱歌</option>
      <option value="Rap">Rap</option>
      <option value="跳">跳</option>
    </select>

    <h1 v-if="selectval == '篮球'">篮球</h1>
    <h1 v-else-if="selectval == '唱歌'">唱歌</h1>
    <h1 v-else-if="selectval == 'Rap'">Rap</h1>
    <h1 v-else-if="selectval == '跳'">跳</h1>
    <h1 v-else>什么都没有选</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectval: "",
    };
  },
};
</script>

<style></style>

效果展示：
在这里插入图片描述
可以看到在页面刚刚加载好的时候显示什么都没有选，说明v-if和v-else-if的条件都没有满足，最后显示v-else绑定的元素

在下拉菜单选择“篮球”的选项后，v-if的条件满足，会显示“篮球”的h1元素

在这里插入图片描述

在下拉菜单选择“唱歌”，“跳”，“Rap”的选项后，v-else-if的条件满足，会显示“唱歌”，“跳”，“Rap”的h1元素

v-show：根据表达式的值切换元素的显示和隐藏，使用CSS的方式来完成元素的显示和隐藏，true就是显示，false就是隐藏

下面通过一个小案例来体会该指令实现的效果：

<template>
  <div>
        <h1>v-show的使用</h1>
        <div v-show="bool">张无忌</div>
        <div v-show="booltwo">金毛狮王</div>
        <button @click="fun()">点我显示和隐藏</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            bool:true,
            booltwo:false
        }
    },
    methods: {
        fun(){
            this.bool=false,
            this.booltwo=true
            
        }
    }
}
</script>

<style>

</style>

效果展示：
在这里插入图片描述
在点击按钮后，触发函数，修改初始值

可以看到使用的是CSS的方式去控制元素的显示和隐藏

v-for：根据原数据遍历渲染元素

下面通过一个小案例来体会该指令实现的效果：

<template>
  <div class="flexBox">
    <div id="demoBox" v-for="(v, i) in arr" :key="i" >  //key为唯一标识符
      <img :src="v.imgurl" />
      <h1>{{ v.title }}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          title: "美食",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/4579713360f6b07c482d475606dcdaf32232.png",
        },
        {
          title: "猫眼电影",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/36ea5f8aa1429104ef51c9e03fe212a54183.png",
        },
        {
          title: "酒店",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/ea0c6fab93f5070dfc7baa50ac9052a02300.png",
        },
        {
          title: "休闲娱乐",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/7b30434d02d20c4e0428cbc2091499f22631.png",
        },
        {
          title: "外卖",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/f8fc99f79983d96a12889d00ad4df41a2868.png",
        },
        {
          title: "KTV",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/982e9a55410baae204a220840b11cc952772.png",
        },
        {
          title: "周边游",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/586d25e7f9615a91b831713c5b68fdd62345.png",
        },
        {
          title: "丽人",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/862a8ecbcaec80cc827090074c358f882565.png",
        },
        {
          title: "母婴亲子",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/51b317553ac233d10e00e22c3b198aac2906.png",
        },
        {
          title: "全部分类",
          imgurl:
            "https://p0.meituan.net/imeituanbusiness/ad793f3d4b6625b60a9aeb64688739952061.png",
        },
      ],
    };
  },
};
</script>

<style scoped>
.flexBox{
    height: 150px;
    display: flex;
    border: 1px solid #eee;
    justify-content: space-around;
    background-color: #fff;
}

#demoBox>img{
    display: block;
    margin: 1px auto;
}   

#demoBox>h1{
    text-align: center;
}
</style>

效果展示：
在这里插入图片描述
可以看到写在data中的数据已经渲染到页面上了，通过v-for可以快速实现批量渲染，在使用时要注意加上key唯一标识符

v-bind：给html属性添加变量

v-bind有两种写法
(1)传统写法：
v-bind:属性=“属性值”
(2)简写写法：
直接使用“:”来代替v-bind，即 :属性=“属性值”

下面通过一个小案例来体会该指令实现的效果：

<template>
  <div>
    <h1>v-bind的使用</h1>
    <!-- 传统写法 -->
    <a v-bind:href="url">{{ text }}</a>
    <hr>
    <!-- 简写写法 -->
    <a :href="url">{{ text }}</a>
  </div>
</template>

<script>
export default {
    data(){
        return {
            text:"点击前往百度",
            url:"http://www.baidu.com/"
        }
    }
}
</script>

<style>

</style>

效果展示：
在这里插入图片描述
在点击后可以跳转到url变量的写好的地址，这个指令可以给属性插入变量

v-on：设置Dom事件的绑定，在触发时执行一些

v-on有两种写法：
(1)传统写法：
v-on:事件名=“事件触发函数”
(2)简写写法：
直接使用@来代替v-on,既 @事件名=“事件触发函数”
事件处理方式有两种：
(1)调用函数处理方式
这种方式要把函数写在methods中，在事件触发时调用写好的函数，在指令中可以不用加（）去调用
(2)内联事件方式
这种方式要把函数写在methods中，在事件触发时调用写好的函数，在指令中必须加（）去调用，在调用的同时可以传入参数

下面通过一个小案例来体会该指令实现的效果：

<template>
  <div>
    <h1>v-on的使用</h1>
    <button v-on:click="fun">点击在控制台打印数据</button>
    <button @click="func">点击在控制台打印数据</button>
    <!--传入事件对象-->
    <button @click="fund($event)">点击在控制台打印数据</button>

  </div>
</template>

<script>
export default {
    data(){
      return {
          text1:"张楚岚",
          text2:"王也"
      }
    },
    methods: {
      fun(){
          console.log(this.text1);
      },
      func(){
          console.log(this.text2);
      },
      fund(e){
          console.log(e); //打印事件对象
      }
    }
}
</script>

<style>

</style>

效果展示：
在这里插入图片描述

v-model：就是在表单元素中进行数据双向绑定，可以用于不同的表单元素，自动监听输入事件

下面通过一个小案例来体会该指令实现的效果：

<template>
  <div>
    <h1>v-model的使用</h1>
    <input type="text" v-model="inputVal">
    <h1>{{ inputVal }}</h1>
  </div>
</template>

<script>
export default {
    data(){
        return {
            inputVal:""
        }
    }
}
</script>

<style>

</style>