Vue指令相关知识点总结——v-text、v-html、v-show、v-if、v-for、v-on等

最新推荐文章于 2022-09-05 00:12:39 发布
最新推荐文章于 2022-09-05 00:12:39 发布
阅读量248 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45621662/article/details/104862324
版权

指令

​ 带有v-前缀的特殊属性。

v-text和v-html指令

​ v-text渲染文本，html代码不会被解析。

​ 和模板语法{{}}的区别：在vue没有创建时{{}}会被当成文本渲染到浏览器中。

​ v-html，如果message中有html代码，会被解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-text="message"></p>
    <p>{{message}}</p>
    <p v-html="message"></p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: "<a href='http://www.baidu.com'>hello world</a>"
        }
    })
</script>
</body>
</html>
v-show指令

​ v-show只是去切换display属性，v-if会直接把标签除去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击</button>
    //flag为true时显示，为false时隐藏
    <p v-show="flag">hello world</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
          flag: true
        },
        methods: {
            fn(){
                //点击时flag取反
                this.flag = !this.flag;
            }
        }
    })
</script>
</body>
</html>
v-if、v-else、v-else-if指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击生成一个分数：{{num}}</button>
    <p v-if="num >= 90">优秀</p>
    <p v-else-if="num >= 70">良好</p>
    <p v-else-if="num >= 60">及格</p>
    <p v-else>重修</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods:{
            fn(){
                this.num = Math.floor(Math.random() * 101);
            }
        }
    })
</script>
</body>
</html>
v-for指令

​ v-for写到哪个元素上就循环哪个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击</button>
    <button v-on:click="add">增加</button>
    <ul v-show="flag">
        <li v-for="item in todos">{{item}}</li>
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            todos: ['恰饭','睡觉','打麻将'],
            flag: false
        },
        methods: {
            fn(){
                this.flag = !this.flag;
            },
            add(){
                this.todos.push("学习");
            }
        }
    })
</script>
</body>
</html>

​ 注：

​ 1 v-for可以打印数组下标

​ 2 可以循环对象

​ 3 可以控制循环次数

​ 4 数组更新后，页面也跟着改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">点击操作</button>
    <ul>
        <!--打印下标-->
        <li v-for="item,index in arr">{{item}}--{{index}}</li>
        <!--循环对象-->
        <li v-for="value,key in obj">{{key}}:{{value}}</li>
        <!--控制循环次数-->
        <li v-for="i in 10">{{i}}</li>

    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            arr: [3,7,2,10,1],
            obj: {
                id: 1,
                name: 'hello',
                age: 18
            }
        },
        methods: {
            fn(){
                //增加数组元素，页面渲染也要跟着变化，要使用到变异方法
                this.arr.push(886);
            }
        }
    })
</script>
</body>
</html>
变异方法和非变异方法

​ 变异方法：执行后原来的数组被改变。

​ 非变异方法：执行后原数组不变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="fn">操作</button>
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            arr: [4,1,7,6,9]
        },
        methods: {
            fn(){
                //1 push在数组末尾添加元素
                this.arr.push(123);
                //2 pop删除数组最后一个元素，返回值就是被删掉的元素
                this.arr.pop();
                //3 shift删除数组的第一个元素
                this.arr.shift();
                //4 unshift从数组最前面开始添加元素
                this.arr.unshift(123);
                //5 splice第一个参数表示删除或添加的起始位置，第二个参数表示删除多少个，从第三个参数开始表示添加的元素
                this.arr.splice(0,2,45,67); //[0,2)区间
                //6 sort默认按字符编码排序（里面需要传入一个函数来写排序规则）
                this.arr.sort((a,b) => {return a>b});   //升序排序
                this.arr.sort((a,b) => {return a<b});   //降序排序
                //reverse翻转数组
                this.arr.reverse();
            }
        }
    })
</script>
</body>
</html>
v-on、v-bind、v-model、v-once、v-pre、v-cloak指令

​ 1 v-on绑定事件，简写形式@

​ 2 v-bind绑定属性，简写形式:属性=’’

​ 3 v-model表单上创建数据的双向绑定

​ 4 v-once只渲染一次,这块内容就当成静态模板，不会再改变

​ 5 v-pre跳过编译,显示语法

​ 6 在vue实例未创建完成时，会出现闪烁问题，v-cloak可以配合css解决这个问题

​ 当需要隐藏的内容较多时使用v-cloak，内容较少的时候使用v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--1   v-on绑定事件，简写形式@-->
    <button @click="fn">点击</button>

    <!--2   v-bind绑定属性，简写形式:属性=''-->
    <a :href="href">百度一下</a>

    <!--3   v-model表单上创建数据的双向绑定-->
    <!--input中的内容变化时，p标签中的内容跟着变化-->
    <button @click="add">增加</button>
    <input type="text" v-model="value">
    <p>{{value}}</p>

    <!--4   v-once只渲染一次,这块内容就当成静态模板，不会再改变-->
    <button @click="change">点击</button>
    <p v-once>{{href}}</pv>

    <!--5   v-pre跳过编译,显示语法-->
    <p v-pre="href">{{href}}</p>
    <hr>

    <!--6   在vue实例未创建完成时，会出现闪烁问题，v-cloak可以配合css解决这个问题-->
    <p v-cloak>{{href}}</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    setTimeout(function(){
        let vm = new Vue({
            el: '#app',
            data: {
                href: 'http://www.baidu.com',
                value: 123
            },
            methods: {
                fn(){
                    alert("嘿嘿");
                },
                add(){
                    this.value ++;
                },
                change(){
                    this.href = 'http://www.taobao.com';
                }
            }
        });
    },50)
</script>
</body>
</html>
iiStar*
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue快速入门学习笔记（一）v-text v-html v-on
自救 唯有自强
07-09 2074
问就是工作需要！快速入门！可以看到div标签内的写法和jQuery开发差不太多 script标签内部，先用el挂载app标签，再给同名变量message赋值 上面是单个变量赋值，多个也可以哦~ 注意，如果要对静态的文本进行动态替换（静态文本动态文本结合展示），需要使用双大括号的写法： 这三种标签的写法都可以拼接字符串哦！ 可以看到，v-html标签和v-text标签的区别就在于 v-html可以解析出超链接（a href=‘www.cxxxx’），有一定前端开发基础的同学对这个应该不陌生。 这也说明
Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre
qiaoyangla的博客
03-24 2098
v-bind：单向绑定解析表达式，可简写为：xxx v-model:双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） 1、v-text 向其所在的节点中渲染文本内容, 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会，还是插值语法用的多 <div>{{name}}</div
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
热门推荐
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
Vue基础 第三讲笔记：v-text、v-html、v-on
qq_49956121的博客
10-02 463
一、v-text指令 设置标签的内容。 特点： 1、默认写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容。 2、内部支持写表达式。 注意： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ message }}哈哈
新手学v-text指令
老段的CSDN的博客
04-26 352
新手学v-text指令 1、错误写法 12 总共几行代码，咋就会报错呢，这时候按f12查看哪里报错，一开多次出现这个v-text="{{ message }}" 然后回去看一下代码，看看这个地方是不是这样写的。 3、正确写v-text指令 ...
Vue插值表达式和v-text，v-html，v-bind，v-on学习心得
junkaigege的博客
11-23 431
Vue插值表达式和v-text，v-html学习心得学习渠道、B站v-cloak v-text v-html {{msg}} 插值表达式的基本使用 学习渠道、B站 看了b站的vue.js讲的蛮细的，然后自己也总结一下记录在这里，希望见证自己在前端技术的成长！ v-cloak v-text v-html {{msg}} 插值表达式的基本使用 几个代码的使用： {{msg}}，插值表达式...
Vue指令之 v-cloak、v-text、v-html实例详解
10-16
当用户频繁刷新页面或网速慢时，页面未完成 Vue.js 的加载时，导致 Vue 来不及渲染，这就会导致在浏览器中直接暴露插值(表达式)，这篇文章主要介绍了Vue指令 v-cloak、v-text、v-html,需要的朋友可以参考下
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
主要介绍了vue的注意规范之v-if 与 v-for 一起使用方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue.js常用指令汇总（v-if、v-for等）
10-21
本文将详细介绍Vue.js中的几个常用指令：v-if、v-for、v-show、v-bind和v-on。 1. **v-if** - 条件渲染指令，用于根据表达式的布尔值决定是否渲染元素。`v-if`更倾向于在条件不满足时避免编译和渲染元素，从而提高...
如何区分vue中的v-show 与 v-if
10-14
在Vue中，`v-if` 和 `v-show` 都是用于条件渲染的指令，但它们之间存在一些关键的区别。 1. 渲染机制： - `v-if`：`v-if` 指令会根据初始条件决定是否真的渲染元素。如果条件为真，Vue将生成并插入相应的DOM元素；...
详解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-html事件失效？自定义指令有何不可
Mr丶Yang
04-14 1078
img标签中可以使用 @error 事件去处理图片地址，显示一些默认图片或者做一些其他的事情 <img src="https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b3.jpg" @error="(e)=>{ e.srcElement.src='https://p.ssl.qhimg.com/t0199397a4f9c5e1b3b.jpg'}"> vue 使用 v-html 来解析 img标签 @error 失效不起作用 ╮(╯﹏╰）╭ &lt.
vue中的v-text，v-html，v-on属性
Dreamer
01-31 1114
v-text 设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。 v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如： v-html v-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如： v-on v-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。
vue-本地应用指令之v-text v-html v-on
qq_43573285的博客
08-03 360
vue-本地应用指令之v-text v-html v-on 文章目录vue-本地应用指令之v-text v-html v-onv-text运行代码运行结果总结v-html与v-text联系运行代码运行结果当为html链接的时候运行代码运行结果v-on基本语法按钮对应事件实现代码实现运行结果当事务复杂的时候代码实现实现效果总结 概念：v-开头的一组特殊语法 1 内容绑定，事件绑定 v-text v-html v-on v-text 运行代码 <!DOCTYPE html> <html&gt
Vue内部指令 v-text & v-html
weixin_42354407的博客
02-17 445
v-text 之前我们学习过 大括号表达式 {{ }} 但是这种方式有一些弊端，当网速卡顿或者出现BUG时候就会暴露我们实例中的数据名 {{msg}} Vue给我们提供了一个内部指令，v-text 来处理这个问题。 核心代码： <span v-text='msg'><span/> v-html 当js中穿插 html 代码块时，可以使用 v-html...
vue之v-text、v-html及v-on标签基本使用
兮动人
02-08 1633
文章目录本地应用v-text：设置标签的文本值v-html：设置标签的innerHTMLv-on基础：为元素绑定事件 本地应用 v-text：设置标签的文本值 <body> <div id="app"> <h2>{{ message }} xdr630</h2> <h2 v-text="message">xdr630</h2> <h2 v-text="info">x
vue中的自定义指令以及模拟v-text、v-html、v-on
liuyuhua666的博客
06-19 1197
注册自定义指令的方式 注册v-focus自动聚焦指令： <div id="app"> <input type="text" v-focus="msg"> </div> 1. 全局注册 Vue.directive("focus", { // Vue会对html代码进行解析 // 解析之后，会将解析后的内容重...
VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定、.stop阻止冒泡.prevent阻止默认.capture捕获触发事件v-model.self、 .once
qq_46179813的博客
05-26 394
1、 VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定机制、.stop阻止冒泡、.prevent阻止默认行为、.capture捕获触发事件、.self只有点击当前元素时候、 .once只触发一次事件处理函数 1、v-cloak能够解决 插值表达式闪烁的问题 2、v-text默认没有闪烁的问题，会覆盖元素中原有的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 3、v-html会把内容中的HTML代码进行解析 4、v-bind是Vue中，提供的
vue中使用v-html,vue中v-text / v-html使用实例代码详解
weixin_39809540的博客
06-17 803
废话少说，代码如下所述：vue实例中的数据,事件和方法new vue({el:"#root",data:{msg: "world",number:123}})显示123vue实例中的数据,事件和方法new vue({el:"#root",data:{content: "hello world",}})补充：vuejs {{}}，v-text 和 v-html的区别{{message}} let a...
vue2中v-if和v-for优先级
最新发布
02-02
在Vue2中，v-if和v-for指令的优先级是不同的。当它们同时出现在同一个元素上时，v-for的优先级更高，即v-for会先被解析和执行，然后再根据v-if的条件进行筛选。 这意味着，如果一个元素上同时存在v-if和v-for指令，Vue会先根据v-for指令生成对应的循环列表，然后再根据v-if的条件进行筛选。这样可以确保只有满足v-if条件的项才会被渲染到页面上。 下面是一个示例代码，用于说明v-if和v-for的优先级： ```html <div> <div v-for="item in items" v-if="item.isActive"> {{ item.name }} </div> </div> ``` 在上述代码中，v-for指令会先根据items数组生成循环列表，然后再根据item.isActive的条件进行筛选，只有满足条件的项才会被渲染到页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值