vue常用的指令

最新推荐文章于 2025-03-14 09:53:39 发布

余一痴

最新推荐文章于 2025-03-14 09:53:39 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript css3 vue.js html5 es6

本文链接：https://blog.csdn.net/yycnf/article/details/109579967

前端专栏收录该内容

45 篇文章

订阅专栏

本文深入讲解Vue中的常用指令，如v-if、v-show、v-on等，并对比了v-if与v-show的区别，还介绍了事件修饰符及动态绑定class的方法。

vue常用的指令

v-if     判断
v-model  双向数据绑定
v-on     事件绑定  （可简写：'@'）
v-show   显示/隐藏
v-html   渲染HTML以及字符串
v-text   渲染字符串
v-bind   属性绑定  （可简写 ':'）
v-for    循环

指令的使用：

v-for 循环指令 (主要用于对象、数组数据的循环渲染到页面指定的位置)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="../vue模板语法之插值/vue.js"></script>
</head>
<body>
    <div id="app01">
        <h2>小明的爱好</h2>
        <ul>
            <li v-for="item in list">{{ item }}</li>
        </ul>
        <h2>学生的爱好</h2>
        <ul>
            <li v-for="stu in students">{{ stu.name }}的爱好是{{ stu.hobby}}</li>
        </ul>
    </div>

    <script>
        let app01 = new Vue({
            el: "#app01",
            data: {
                list: [
                    "学习",
                    "逛街",
                    "美甲"
                ],
                students: [
                    {
                        name: "dog",
                        hobby: "骨头"
                    },
                    {
                        name: "job",
                        hobby: "work"
                    },
                    {
                        name: "jeary",
                        hobby: "study"
                    }
                ]
            }
        })
    </script>
</body>
</html>

v-if和v-show的区别：

共同点：都是控制元素显示或隐藏

不同点：1、v-if 是动态的向DOM树内添加或者删除DOM元素；而v-show是通过设置DOM元素的display样式属性控制显隐；

2、v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；而v-show只是简单的基于css切换显示/隐藏；

3、v-if是有惰性的，如果初始条件为假，则不会进入编译；只有在条件第一次变为真时才开始局部编译;而v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

4、v-if频繁删除、创建元素有更高的切换消耗；而v-show只有初始渲染消耗高，v-show适合频繁切换；

v-on 事件绑定

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的

//例如 监听<a>元素的点击事件：
<a v-on:click="doSomething"></a>
//v-on可以简写“@”
//也可以写成：   <a @click="doSomething"></a>

常用的事件修饰符：

在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。

在Vue中事件修饰符主要有：

.stop：    等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent： 等同于JavaScript中的event.preventDefault()，防止事件的默认行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture： 与事件冒泡的方向相反，事件捕获由外到内（触发事件捕获）
.self：    只会触发自己范围内的事件，不包含子元素（当事件在该元素本身上时，触发）
.once：    只会触发一次

表单修饰符：

//.lazy
//在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 
//使用：
<input v-model.lazy="msg" >



//.number
//如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
//使用：
<input v-model.number="age" type="number">



//.trim
//如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
//使用：
<input v-model.trim="msg">

键盘修饰符：

在监听键盘事件时，我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件
这里列出所有的按键修饰符别名：

.enter => // enter键

.tab => // tab键

.delete (捕获“删除”和“退格”按键) => // 删除键

.esc => // 取消键

.space => // 空格键

.up => // 上

.down => // 下

.left => // 左

.right => // 右

vue中动态绑定class

Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过vue.js动态绑定class就变得非常简单。

//使用
<template>
<div>
    <div @click="onClick(0)" :class="active==0?'box-active':''">点我有惊喜</div>
    <div @click="onClick(1)" :class="active==1?'box-active':''">Hoello world!!</div>
</div>
</template>
<script>
    export default {
        data(){
            return{
                active:-1,//默认的
        }    
    },
     methods:{
        onClick(index){//点击的时，显示高亮
            this.active = index;
        }
    }  
}

</script>

<style scoped>
div{
    width:150px;
    height:40px;
    display:flex;
    align-items: center;
}
.box-active{
    color:orange;
    border-bottom:1px solid orange;
}
</style>