Vue中常用的8种v指令

最新推荐文章于 2024-09-14 07:42:19 发布
置顶 最新推荐文章于 2024-09-14 07:42:19 发布
阅读量6k 收藏 36
点赞数 7
分类专栏： Vue 文章标签： 前端框架 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45834685/article/details/124233766
版权

Vue中常用的8种v指令

根据官网的介绍，指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

指令功能
v-text=“变量/表达式”文本的设置
字符串变量+数字可以直接写是拼接
字符串如果出现要使用外部不相同的引号
v-html=“变量”文本或者页面的设置
如果变量只是普通文本，作用和 v-text 相同
如果变量是一个完整的标签字符串，则会解析成为html
v-on:click=“方法名”
@click=“方法名”		绑定方法
可以是无参方法，也可以是有参方法
v-show=“布尔值变量”标签的显示和隐藏
根据布尔值变量的真与假，将标签显示或隐藏
v-if=“布尔值变量”标签的创建与销毁
效果与 v-show 相同，但是频繁操作性能开销很大
v-for="item,index in arr"
v-for=“item in arr”		数组的循环遍历
将数组中的数据，索引进行遍历
v-bind:标签属性=“属性值”
:标签属性=“属性值”		标签属性的绑定
可以直接修改标签中的属性值
v-model=“变量值”数据双向绑定
变量值的修改会影响页面显示，页面变化也会影响变量值

1 v-text 指令

作用:

  • 获取data数据, 设置标签的内容，以纯文本进行显示
  • v-text 会覆盖 标签中的内容，如果想要拼接数据，可以直接在v-text中拼接
    • 如果拼接的是数字：直接使用 “+”
    • 如果拼接的是字符串，需要使用与外部不同的引号进行包裹内容

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 第一种.获取 vue 中定义的数据，会将插值表达式的内容与标签中的内容进行拼接 -->
        <h2>{{msg}}-云梦归遥</h2>
        <!-- 第二种.获取 vue 中定义的数据，设置标签中的内容，而且会覆盖标签中的内容 -->
        <h2 v-text="msg">-云梦归遥</h2>
        <h2 v-text="msg+21"></h2> <!-- v-text 拼接数字可以直接相加 -->
        <h2 v-text="msg+'-云梦归遥'"></h2> <!-- v-text 拼接字符串需要用不同于外部的单引号或双引号 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java 程序员",
        },
    });
</script>
</html>

在这里插入图片描述

2 v-html 指令

作用:

  • 可以当做 v-text 一样使用，显示普通文本

  • 设置元素的 innerHTML (可以向元素中写入新的标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.获取普通文本的三种方式 -->
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg"></h2>
        <hr>
        <!-- 2.v-html 不仅可以当做 v-text 使用，更重要的是可以设置元素的 innerHTML -->
        <h2 v-text="url"></h2> <!-- v-text 直接以文本形式进行显示 -->
        <h2 v-html="url"></h2> <!-- v-html 将会以定义的标签的形式进行显示 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序员",
            url: "<a href='https://www.baidu.com'>百度一下</a>"
        },
    });
</script>
</html>

在这里插入图片描述

3 v-on 指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.单击事件 -->
        <!-- 标准书写的方式 v-on:click="方法名" -->
        <input type="button" value="调用v-on指令-单击事件-标准书写" v-on:click="show"><br>
        <!-- 简写的方式: @click="方法名" -->
        <input type="button" value="调用v-on指令-单击事件-简写的方式" @click="show"><br>
        <!-- 2.双击事件 -->
        <input type="button" value="双击事件" @dblclick="show"><br>
        <hr>
        <!-- 绑定点击事件，修改标签内容 -->
        <h2 @click="changeName">{{msg}}</h2>
        <h2 v-text="msg" @click="changeName"></h2>
        <h2 v-html="msg" @click="changeName"></h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序员"
        },
        // 通过 methods 来定义 v-on 中调用的方法
        methods: {
            show:function(){
                alert("v-on 指令对应的方法被调用");
            },
            changeName:function(){
                // 使用 this 获取 data 中的数据
                this.msg += "-云梦归遥";
            },
        },
    });
</script>
</html>

在这里插入图片描述

案例：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <!-- <link href="css/inputNum.css" rel="stylesheet"> -->
</head>
<body>
    <div id="app">
        <!-- 计算功能区域 -->
        <div>
            <input type="button" @click="addNum" value="+">
            <span>{{num}}</span>
            <input type="button" v-on:click="minusNum" value="-">
        </div>
        <p>{{result}}</p>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 0,
            result: "当前数值是[ 0 ], 还未执行操作"
        },
        methods: {
            addNum: function(){
                this.num += 1;
                this.result = "当前数值是[ " + this.num + " ], 执行 +1 操作";
            },
            minusNum: function(){
                this.num -= 1;
                this.result = "当前数值是[ " + this.num + " ], 执行 -1 操作";
            },
        },
    });
</script>
</html>

在这里插入图片描述

4 v-show 指令

作用: v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏

原理：修改 style 的display为 block 或 none，进行显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="图片显示/隐藏切换" @click="show"><br>
        <!-- v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏 -->
        <img src="img/logo.jpg" v-show="flag" style="width: 300px; height: 300px;">
        <!-- 还可以通过表达式的结果 来进行显示和隐藏 -->
        <img src="img/logo.jpg" v-show="num > 18" style="width: 300px; height: 300px;">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            flag: true, // 作为是否显示图片的判定值
            num: 21
        },
        methods: {
            show:function(){
                this.flag = !this.flag;
            },
        },
    });
</script>
</html>

在这里插入图片描述

5 v-if 指令

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

原理：会操作 DOM 元素，将元素删除或添加，而不是像 v-show 一样修改样式

使用场景：频繁切换使用 v-show，反之使用 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="v-if切换图片显示/隐藏" @click="show"><br>
        <!-- v-if 根据表达式的真假判断显示 或 隐藏 -->
        <img src="img/logo.jpg" style="width: 300px; height: 300px;" v-if="isShow">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data:{
            isShow: false,
        },
        methods: {
            show: function(){
                this.isShow = !this.isShow;
            },
        },
    });
</script>
</html>

6 v-bind 指令

作用: 设置元素的属性 （比如：src，title，class，style传递json串）

  • 一次只能修改一个属性
    • v-bind:属性名=“属性值”
    • :属性名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这是原图片 -->
        <img src="img/logo.jpg" style="width: 300px;height: 300px;" alt="图片加载失败">
        <!-- v-bind:src 设置了一个 图片的 属性 -->
        <img v-bind:src="img1" style="width: 450px; height: 300px;" alt="图片加载失败">
        <!-- v-bind:title 设置了一个图片的 标题 ，使用 v-bind修改属性都可以简写为 :属性名-->
        <img v-bind:src="img2" style="width: 450px;height: 300px;" :title="img2_title" alt="图片加载失败">
        <!-- v-bind 设置 class -->
        <div style="width: 300px; height: 300px; background: green;" :style="{width: size + 'px'}"></div>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            img1: "img/4.png",
            img2: "img/3.png",
            img2_title: "斗罗大陆-火舞",
            size: 200,
        },
        methods: {
            
        },
    });
</script>
</html>

在这里插入图片描述

7 v-for 指令

作用: 根据数据生成列表结构，常与数组一起使用，进行遍历操作

  • v-for="item,index in arr1"

  • v-for="person in persons"

相关方法：

  • push（）：将元素追加进入数组
  • shift（）：将数组的起始元素删除

数组的长度变化,会同步更新到页面上,是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for：在 li 标签中进行获取数组元素，进行展示 -->
            <!-- item: 循环得到的元素；index：获取元素在数组中的下标 -->
            <li v-for="item,index in arr1">
                第{{index + 1}}个同学: {{item}}
            </li>
        </ul>
        <hr>
        <input type="button" value="添加数据" @click="addData">
        <input type="button" value="移除数据" @click="removeData">
        <!-- v-for 遍历，展示数据 -->
        <h2 v-for="person in persons">
            我是 {{person.name}}, 我今年 {{person.age}} 岁.
        </h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            // 数组
            arr1: ["Mike", "John", "Jack"],
            // 对象数组
            persons: [
                {name: "Mike", age: 21},
                {name: "John", age: 22},
                {name: "Jack", age: 23},
            ],
        },
        methods: {
            addData: function(){
                // 向数组中添加元素
                this.persons.push({name: "Peter", age: 24});
            },
            removeData: function(){
                // 移除数组中的元素，会移除第一个元素
                this.persons.shift();
            },
        },
    });
</script>
</html>

在这里插入图片描述

8 v-on 补充

作用：

  • 可以向函数传递参数
  • 事件修饰符，可以制定哪些方式触发事件，比如说按键，回车等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on：绑定函数，可以进行传参 -->
        <input type="button" value="礼物刷起来" @click="show(3, '穿云箭')"><br>
        <span style="color: green;">向主播狂刷{{num}}个</span>
        <span style="color: red;">{{gift}}</span>
        <hr>
        <!-- v-on：事件修饰符 指定哪些方式触发事件，比如说 按键，回车等等 -->
        <input type="text" @keyup="up" placeholder="一输入内容就会弹窗"><br>
        <input type="text" @keyup.enter="up" placeholder="输入回车才会弹窗"><br>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 1,
            gift: "一个鱼丸",
        },
        methods: {
            show:function(p1, p2){
                this.num = p1;
                this.gift = p2;
            },
            up:function(){
                alert("hello world");
            },
        },
    });
</script>
</html>

在这里插入图片描述

云梦归遥
关注
专栏目录
vue基础 v-系列
qq_41027812的博客
12-09 1841
前端主要工作： 官网：展示公司、炫酷(交互效果多)、数据比较少。基本上一定是前端做 小程序：页面不一定很炫酷、数据不一定很多。一定是前端做 app：展示公司、页面不炫酷、数据很多。大概率不是前端做 后台管理系统：页面不炫酷、数据非常庞大。一定是前端做的 功能：公司人员、薪酬福利、请假、公告 H5活动页面：页面炫酷、数据不多、一次性使用。一定是前端做的 Vue 1、作者：尤雨溪 2、官网：https://cn.vuejs.org 3、渐进式JavaScript 框架 渐进式：主张最少 jquery:主要用来处
V-指令篇
qq_38017417的博客
04-28 1163
v- 开头都是指令 &lt;script&gt; // 每一个Vue的应用都是通过创建一个Vue的实例来启动的 // 在实例化时，需要传入一个选项对象 var app = new Vue({ el:"#app", //提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标,可以是 CSS 选择器和html元素...
v-scale-screen 项目使用教程
最新发布
gitblog_00879的博客
09-14 735
v-scale-screen 项目使用教程 项目地址:https://gitcode.com/gh_mirrors/vsc/v-scale-screen 1. 项目介绍 v-scale-screen 是一个用于 Vue.js 的大屏自适应容器组件。它可以帮助开发者在开发大屏项目时，实现屏幕的自适应，包括宽度自适应、高度自适应以及宽高比自适应。该组件支持全屏自适应，并且可以根据需要进行配置，以适应不...
vue常用的8种v指令
m0_71858591的博客
11-24 759
在vue.js中，指令是带有“v-”前缀的特殊特性，作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM；将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。
vue的v指令
txwsmsm7023_的博客
07-13 231
v-标签 v-cloak：状态闪烁，利用改属性避免闪烁状态[v-cloak]{display:none} v-text(等价于{{}}):用于输出Vue对象的文本内容，会覆盖标签加载之前的显示内容 v-html:将对象中的包含HTML标签的字符串渲染到HTML中 v-blind（：简写）:给属性绑定Vue对象变量的属性，让属性知道他的值十一个变量值去获取变量值，此时属性的值可以是表达式可以是...
vue:常用的v-指令
qq_51476492的博客
03-19 4079
1.v-html:将属性值的html语言识别并渲染出来 例子如下： 使用v-html: 2.v-bind，置于标记的属性前用冒号隔开，控制该属性的值为其原来值对应在vm对象中的数据 例如下例： 而且在浏览器中使用快捷键F12(或Fn+F12)，查看网页源代码会发现属性值已被替换： "v-bind:"可省略为一个冒号： 3.v-on ...
Vue中的v-for指令不起效果的解决方法
10-17
在Vue.js中，`v-for`指令是一种非常重要的特性，用于循环遍历数组或对象，渲染列表、表格等数据集合。然而，在实际开发过程中，有时可能会遇到`v-for`指令不起作用的问题。以下将详细解释这个问题的原因以及解决方法...
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
浅析vue中常见循环遍历指令的使用 v-for
10-18
在Vue.js中，v-for是用于遍历数组或对象并渲染一个列表的指令。这是Vue.js的核心功能之一，使得开发者可以轻松地重复使用模板元素，来展示集合数据。 首先，v-for的基本用法是与指令v-bind结合使用。它的语法类似于...
vue项目中常用的自定义指令
04-12
在Vue.js项目开发中，自定义指令（Custom Directives）是一种强大的特性，允许开发者扩展Vue的内置行为，以实现特定的交互逻辑或DOM操作。以下将详细解释标题和描述中提及的一些常用自定义指令及其应用。 1. **v-...
详解vue中v-on事件监听指令的基本用法
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的特性，包括`v-on`事件监听指令，用于处理用户交互。本文将深入解析`v-on`的基本用法，并通过实例演示如何在Vue应用中有效地监听和响应用户事件。 一、...
RICS_V指令集
09-25
国内首个使用RISC_V指令集架构开发的处理器芯片内核，蜂鸟E200开放源码和SoC原型。
vue中常见的v指令
weixin_56275924的博客
11-09 362
常用指令 v-text 设置双标签元素的innerText v-html 设置双标签元素的innerHTML v-if 插入或者移除元素(true,插入,false移除) v-else 保证上方兄弟节点存在v-if || v-else-if v-if v-else 只会有其一存在 v-show 隐藏或者显示元素 v-model 双向数据绑定（ 元素必须有value, DOM元素的value与js内存变量的属性绑定） ...
Vue基础语法——v指令的基本用法
qq_43706131的博客
08-16 1583
1、v-bind 使用 v-bind 来绑定元素特性! 01-v-bind.html <body> <div id="app"> <!-- 如果要将模型数据绑定在html属性中 则使用 v-bind 指令,此时title中显示的是模型数据 --> <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1> <!-- v-bind 指令
vue中常用的 v- 指令和自定义指令
Akatsuki233的博客
02-19 1131
常用指令 v-if 元素是否移除或者插入 v-show 元素是否显示或隐藏 v-model 双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面) v-text 是元素的innerText只能在双标签中使用 v-html 是元素的innerHTML，不能包含注释 &amp;lt;!--{{xxx}} --&amp;gt; 自定义指令 参考 &amp;gt; https://www.cnblogs.c...
vue监听移动端左滑、右滑、上滑、下滑、长按事件
chuimu6051的专栏
03-19 5188
定义一个监听touch指令，主要根据计算开始到结束滑动的位置计算X、Y轴相应的距离再计算角度来判断滑动的方向 directives:{ //滑动指令 touch:{ bind: function (el, binding, vnode) { var tou...
【Vue】各v-指令用法
qq_45677671的博客
07-21 2455
v-html、v-text、v-show、v-if、v-for、v-on、v-bind、v-model、v-once、v-cloak、v-pre、v-slot 等指令的使用
前端开发：Vue中的v-指令使用的汇总
2401_84152928的博客
05-08 1313
场景：当页面加载时，让输入框获得焦点。只要在打开这个页面后还没点击过任何内容的时候，这个输入框就应当还是处于聚焦状态，这里使用v-focus指令来实现该需求，具体使用如下所示：// 注册全局自定义指令v-focus// 当被绑定的元素将要插入到 DOM 中时// 聚焦对应的元素自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
Vue（一）vue 概述与用法、MVVM、绑定语法、vue 指令_this
2401_84141419的博客
04-17 583
原理：只要 new Vue() 扫描到 v-show，就会先计算=右边的判断条件的值，如果=右边的判断条件值为 true，则当前元素默认正常显示，如果=右边的判断条件值为 false，则 v-show 自动被翻译为style=“display:none”，表示当前元素。是专门保存界面中所有可能发生变化的元素的简化版 DOM 树；f. methods 中的函数和 data 中的变量，最终会平级保存，都直接隶属于new Vue()，methods 中的函数，想操作 data 中的变量，必须加 this.。
vue中的v-for指令详解
09-12
Vue.js中的`v-for`指令是用于遍历数组、对象或其他可迭代的数据源，并将其项渲染成HTML元素的一部分。它是最常用的模板指令之一，可以帮助我们在视图层动态生成列表或表格。 `v-for`指令的基本语法如下： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值