Vue基本指令：v-on,v-if,v-mode

已于 2023-02-28 09:56:20 修改
阅读量1.2k 收藏 5
点赞数 3
分类专栏： vue 文章标签： vue.js javascript 前端
于 2023-02-27 18:13:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi341500/article/details/129236117
版权

目录

Vue基本指令

1、v-text指令：设置标签的文本值

2、v-html指令：设置标签的innerHTML

3、v-on指令：为元素绑定事件

4、v-on:传参

5、v-show指令：根据真假切换元素的显示状态

6、v-if指令：根据表达式的真假切换元素的显示状态

7、v-bind：为元素绑定属性

8、v-for指令：根据数据生成列表结构

9、v-mode：便捷的设置和获取表单元素的值

Vue基本指令

1、v-text指令：设置标签的文本值

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

v-text与{{}}的区别

使用v-text，标签内在加内容显示不出来

<h2 v-text="message + '!'">这里的内容不显示</h2>

在{{}}后面添加别的内容可以显示

<h2>{{ message + '!'}}这里的内容显示</h2>

示例：

<!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>v-text 指令</title>
</head>
<body>
    <div id="app">
       <h2 v-text="message + '!'">不显示</h2>
        <h2 v-text="info">不显示</h2>
        <h2>{{ message + '!'}}显示</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好，Vue！",
                info: "前端框架"
            }
        })
    </script>

</body>
</html>

2、v-html指令：设置标签的innerHTML

v-text：指令无论内容为什么都显示的是文本内容

v-html：指令有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>v-html指令</title>
</head>
<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://www.taobao.com/'>淘宝</a>"
            }
        })
    </script>
</body>
</html>

3、v-on指令：为元素绑定事件

事件写在：methods中，事件名不用写on

语法：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>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击" @dblclick="doIt">
        <h2 @click="changeFood">点击：{{food}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food: "西红柿炒蛋"
            },
            methods: {
                doIt: function(){
                    alert("111")
                },
                changeFood: function(){
                    this.food +="好吃！"
                }
            }
        })
    </script>
</body>
</html>

4、v-on:传参

事件绑定的方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

示例：
 

<!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>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'你好')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                doIt: function(p1,p2){
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function(){
                    alert("111")
                }
            }
        })
    </script>

</body>
</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>
</head>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub"> - </button>
            <span> {{num}} </span>
            <button @click="add"> + </button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num: 1
            },
            methods: {
                add: function(){
                    if(this.num <10){
                        this.num++;
                    }else{
                        alert("已到最大值！")
                    }
                },
                sub: function(){
                    if(this.num >0){
                        this.num--;
                    }else{
                        alert("已到最小值！")
                    }
                }
            }
        })
    </script>
</body>
</html>

5、v-show指令：根据真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，值为true元素

显示,值为false元素隐藏

示例：

<!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>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="增加年龄" @click="addAge">
        <img v-show="isShow" src="./06.jpg">
        <img v-show="age>=18" src="./06.jpg">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 17
            },
            methods: {
                changeIsShow: function(){
                    this.isShow = !this.isShow;
                },
                addAge: function(){
                    this.age++;
                }
            }
        })
    </script>
</body>
</html>

6、v-if指令：根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

示例：

<!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>v-if指令</title>
</head>
<body>
    
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">张三</p>
        <p v-show="isShow">张三-20</p>
        <p v-if="temperature > 30">热死了</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 28
            },
            methods: {
                toggleIsShow: function(){
                    this.isShow = !this.isShow;
                    this.temperature++;
                }
               
            }
        })
    </script>
</body>
</html>

7、v-bind：为元素绑定属性

完整写法是v-bind:属性名

简写的话可以直接省略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>v-bind</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle + '!'" 
        :class={active:isActive} @click="toggleActive">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./06.jpg",
                imgTitle: "柴犬",
                isActive: false
            },
            methods: {
                toggleActive: function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>
</html>

8、v-for指令：根据数据生成列表结构

数组经常和v-for结合使用

语法是：( item,index ) in 数据

item和index可以结合其他指令一起使用

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

示例：

<!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>
</head>
<body>
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index + 1}} 兴趣：{{item}}
            </li>
        </ul>
        <h2 v-for="item in music">
            {{item.name}}
        </h2>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["唱","跳","rap","篮球"],
                music: [
                    {name: "琵琶行"},
                    {name: "哪里都是你"}
                ]
            },
            methods: {
                add: function(){
                    this.music.push({name: "起风了"});
                },
                remove: function(){
                    this.music.shift();
                }
            }
            
        })
    </script>
</body>
</html>

9、v-mode：便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

示例：

<!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>
</head>
<body>
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-modle="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message: " Hello Vue! "
            },
            methods: {
                getM:function(){
                    alert(this.message);
                },
                setM: function(){
                    this.message = "Hellow word!"
                }
            }
        })
    </script>
</body>
</html>


 

Poetry-Distance
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue样式穿透 ::v-deep的具体使用
10-15
主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在组件上使用 v-model
前端精髓
04-17 6487
自定义事件也可以用于创建支持` v-model` 的自定义输入组件。
vue2和vue3 组件中v-model的使用方式
SUperstarkd的博客
09-15 614
vue2和vue3组件中v-model的多种使用方式
v-mode详解以及具体的使用示例
最新发布
five-five
03-07 679
在 Vue.js 中，组件是可重用的 Vue 实例，它们拥有自己的数据和方法，并可以接受来自父组件的 props 数据。在组件中使用 `v-model` 时，可以实现组件和父组件之间的双向数据绑定。 组件中使用 `v-model` 的原理是：父组件将一个值传递给子组件的 props 属性，子组件通过 `$emit` 方法触发一个自定义事件，将新值传递回父组件。父组件接收到新值后，更新数据，从而实现双向绑定。 在组件中使用 `v-model` 时，需要在组件中定义一个 `model` 选项，该选项用于指定
v-mode
weixin_43613849的博客
06-02 1858
目录 1、v-model的基本使用 2、v-model的原理 3、v-model结合radio类型 4、v-model结合checkbox 5、v-model结合select类型 6、v-model修饰符的使用 1、修饰符lazy 2、修饰符number 3、修饰符trim 1、v-model的基本使用 nVue中使用v-model指令来实现表单元素和数据的双向绑定。 当我们在输入框输入内容时 因为input中的v-model绑定了message，所以会实时将输入的内容传递给me
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 14万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
Vue.js条件渲染指令v-if及v-show
m0_61961937的博客
04-21 5636
是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的销毁和重建，v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到第一次变为真时，才会开始渲染条件块。可以看出v-if隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show是通过css的display：none来控制的。一般来说，v-if每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而v-show有更高的初始渲染开销。值得注意的是，v-show。
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 3575
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
v-if指令
青柠晶晶的博客
08-03 4万+
1.v-if指令的作用是：根据表达式的真假切换元素的显示状态 2.本质是通过操纵dom元素来切换显示状态 3.表达式的值为true,元素存在于dom树中，为false,从dom树中移除 4.频繁的切换使用v-show,反之使用v-if,前者的切换消耗小 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-
vue v-on:click传递动态参数的步骤
10-14
主要介绍了vue v-on:click传递动态参数的步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ...
vue.js指令v-model实现方法
10-20
主要为大家详细介绍了vue.js指令v-model实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义指令实现v-tap插件
09-01
主要为大家详细介绍了vue自定义指令实现v-tap插件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE学习三：双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
冯安晨
08-06 529
VUE学习三：双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
【Vue】Vue中的条件渲染（v-if、v-else-if、v-else 以及 v-show）的使用（实例详解）
一只洒鹿
06-25 5万+
v-if v-else v-else-if v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truth值的时候被渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.js"></script> </head> &lt
Vue的基础语法-常用v-on、v-if、v-bind等指令的细节(最详细)
m0_71485750的博客
07-21 1318
v-bind指令是帮助我们动态绑定属性的**前面讲的一系列指令，主要是将值插入到模板内容**中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性；绑定属性我们使用v-bind(以下是官方对v-bind的描述,看不懂了解即可,很多东西我们都是用不上缩写预期参数修饰符.camel-将kebab-caseattribute名转换为camelCase。用法。......
vue之v-mode
weixin_43324909的博客
04-21 1314
v-model指令 可以在表单元素上创建双向数据绑定。即数据更新元素更新、元素更新数据也会更新。 本质上v-model为语法糖 元素类型 属性 事件 input[type=text]、textarea value input input[checkbox]、input[radio] checked change select value change input t...
vue 使用v-if切换输入框时，导致输入框的数据内容没有清空
учёба
05-30 758
如果是对加了表单验证的元素进行显示隐藏，当使用 v-show 时，元素隐藏了，但是表单验证依旧存在，valid 永远返回 false。，那便是：添加一个具有唯一值的 key 属性。如果代码中使用上述的进行输入框的切换，由此，vue提供一种方式来表示。
vue3 实现:v-model
09-15
Vue3实现v-model的原理是通过将v-model指令绑定到表单元素上，并将元素的值与Vue实例中的数据进行双向绑定。当用户在表单元素中输入内容时，Vue会自动更新数据，反之亦然。 在Vue3中，v-model指令可以直接应用在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值