首先我们知道vue中有很多自定义指令,以v- 开头,例如:v-text,v-bind,v-model, v-if,等

在这些指令中,部分指令之间是很容易被混淆,所以今天决定自己总结一下以下几个相似指令之间的异同:

1.v-text

v-text是用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。其中:v-text可以简写为{{}},并且支持逻辑运算。

<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : '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'
}
})

4.{{}}
{{}}是v-text的简写形式

---------------------
作者:yummyH
来源:CSDN
原文:https://blog.csdn.net/u014541501/article/details/78181729
版权声明:本文为博主原创文章,转载请附上博文链接!

v-text,v-html等区别的更多相关文章

  1. mysqlbinlog -v --base64-output 与不加的区别

    加-v与加-vv的区别: 加--base64-output=DECODE-ROWS与不加的区别:

  2. v$lockv和$locked_object的区别

    v$lockv和$locked_object的区别 url: http://blog.sina.com.cn/s/blog_62defbef0101pgvo.html 2013-12-24 v1.0 ...

  3. [转]v$parameter, v$parameter2, v$system_parameter, v$system_parameter2, v$spparameter区别

    本文转自:http://blog.csdn.net/huang_xw/article/details/617389 1 v$parameter v$parameter显示的是session级的参数. ...

  4. 转:V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  5. 学习动态性能表(14)--v$parameter&v$system_parameter

    学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER  2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...

  6. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  7. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  8. A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes

    A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...

  9. 错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You can disable statistics in the preference menu,or obtanin select priviliges on the v$session,v$sess

    1.错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You ...

  10. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

随机推荐

  1. 微服务SpringCloud之服务调用与负载均衡

    上一篇我们学习了服务的注册与发现,本篇博客是在上一篇的基础上学习服务的调用.上一博客主要创建了Eureka的服务端和一个Client,该Client包含了一个Controller用来提供对外服务供外部 ...

  2. 机器学习读书笔记(二)使用k-近邻算法改进约会网站的配对效果

    一.背景 海伦女士一直使用在线约会网站寻找适合自己的约会对象.尽管约会网站会推荐不同的任选,但她并不是喜欢每一个人.经过一番总结,她发现自己交往过的人可以进行如下分类 不喜欢的人 魅力一般的人 极具魅 ...

  3. C++学习书籍推荐《More Exceptional C++(英文)》下载

    百度云及其他网盘下载地址:点我 作者简介 Herb Sutter is the author of three highly acclaimed books, Exceptional C++ Styl ...

  4. 包教包会之Open Live Writer设置代码样式

    Open Live Writer(以下简称OLW),作为一个在本地写博文,然后发布到各个博客网站的客户端,在使用上个人觉得还是比较好用的.但是其对IT博文中代码部分的内容样式支持不是很友好.下面是本人 ...

  5. ZIP:ZipEntry

    ZipEntry: /* 此类用于表示 ZIP 文件条目. */ ZipEntry(String name) :使用指定名称创建新的 ZIP 条目. ZipEntry(ZipEntry e) :使用从 ...

  6. VSCode 云同步扩展设置 Settings Sync 插件

    VSCode 云同步扩展设置 Settings Sync 插件 Hi.大家好,今天又是美好的一天. 关于 Settings Sync扩展: Settings Sync可以同步你当前的VSCode配置环 ...

  7. [原创]mininet安装

    mininet安装: on Ubuntu 13.04: sudo apt-get install minineton Ubuntu 12.10: sudo apt-get install minine ...

  8. 洛谷P4994 终于结束的起点 题解

    求赞,求回复,求关注~ 题目:https://www.luogu.org/problemnew/show/P4994 这道题和斐波那契数列的本质没有什么区别... 分析: 这道题应该就是一个斐波那契数 ...

  9. centOS7 安装mysql-5.7.20-1.el7.x86_64.rpm-bundle.tar

    在虚拟机上安装mysql走了不少弯路,在此备份... 首先感谢下这几篇博客提供的帮助: https://www.cnblogs.com/pythonal/p/6141516.html http://b ...

  10. linux初学者-延迟及定时任务篇

    linux初学者-延迟及定时任务篇 在linux系统的学习工作中,南面会遇到需要延迟进行的任务和需要定时去完成的任务,就像手机的闹钟一样,这时候就需要用到linux系统当中的系统延迟和定时任务的设置了 ...