vue学习：v-text，v-html, v-model, {{}}之间的异同

1. v-text

v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。

其中：v-text可以简写为{{}}，并且支持逻辑运算。

<div id="app">
  {{ msg }}
</div>

var app = new Vue({    el : '#app',
    data : {        msg : 'hello world'
    }
})

注：vue中有个指令叫做 v-once 可以通过v-once与v-text结合，实现仅执行一次性的插值。

<span v-once>这个将不会随msg属性的改变而改变: {{ msg }}</span>

2. v-html

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

<div id="app">
    <p v-html="html"></p>
</div>

let app = new Vue({        el: "#app",
        data: {            html: "<b style='color:red'>v-html</b>"
        }
    });

3. v-model

v-model通常用于表单组件的绑定，例如input，select等。它与v-text的区别在于它实现的表单组件的双向绑定，如果用于表单控件以外标签是没有用的。

<div id="app">
  <input v-model="message " />
</div>

var app = new Vue({   el : '#app',
   data : {    message : 'hello world'
 }
})

本文链接：https://blog.csdn.net/u014541501/article/details/78181729

vue学习：v-text，v-html, v-model, {{}}之间的异同相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
查看oracle 导出进程,【学习笔记】Oracle 通过v$session查看imp进程信息的案例
天萃荷净运维DBA反映需求在执行Oracle imp导入时需要查看导入的进程信息,通过v$session分析imp导入进程在服务器端v$session中的username列不是imp登陆用户名,而是 ...
v.douyin.com/xxx v.ixigua.com/xxx抖音西瓜网址官方生成制作抖音西瓜缩短口令网址(仅供参考学习)
抖音短链:https://v.douyin.com/2vGHjMu/(仅限抖音打开) 西瓜短链:https://v.ixigua.com/2oXjpMN/ v.douyin.com是抖音官方的接口,可 ...
【Linux】system V 消息队列 | system V 信号量(简单赘述)
文章目录 1 . system V 消息队列(了解) 接口查看消息队列 2.system V 信号量 (了解) 1.进程互斥等概念的理解 2.认识信号量 3. 接口这两部分主要是了解即可,为后面学 ...
oracle 关系表视图_oracle动态视图v$,v_$,gv$,gv_$与x$之间的关系
前言:在oracle运维的过程中,经常会使用到一些以V$开头的动态视图,比如V$session, 有一次偶然看到有人用V_$session, 初以为别人写错了,没想到desc v_$session以后 ...
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及网镖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; ...

vue学习：v-text，v-html, v-model, {{}}之间的异同

1. v-text

2. v-html

3. v-model

vue学习：v-text，v-html, v-model, {{}}之间的异同相关推荐

最新文章

热门文章