v-text,v-html等区别
首先我们知道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等区别的更多相关文章
- mysqlbinlog -v --base64-output 与不加的区别
加-v与加-vv的区别: 加--base64-output=DECODE-ROWS与不加的区别:
- v$lockv和$locked_object的区别
v$lockv和$locked_object的区别 url: http://blog.sina.com.cn/s/blog_62defbef0101pgvo.html 2013-12-24 v1.0 ...
- [转]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级的参数. ...
- 转:V$SQL,V$SQLAREA,V$SQLTEXT
V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...
- 学习动态性能表(14)--v$parameter&v$system_parameter
学习动态性能表 第14篇--V$PARAMETER&V$SYSTEM_PARAMETER 2007.6.11 这两个视图列出的各参数项名称以及参数值.V$PARAMETER显示执行查询的se ...
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- v$session & v$session_wait
(1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...
- 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 (文 ...
- 错误提示: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 ...
- 动态性能视图v$mystat,v$sesstat,v$statname
视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...
随机推荐
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- Spring Bean 生命周期之destroy——终极信仰
上一篇文章 Spring Bean 生命周期之我从哪里来 说明了我是谁? 和 我从哪里来? 的两大哲学问题,今天我们要讨论一下终极哲学我要到哪里去? 初始化 Spring Bean 有三种方式: @P ...
- Intent对象(组件间的通信原理)
Intent对象是一种可以在运行时动态绑定组件的关键技术,通过使用Intent对象,可以告诉系统你想要实现什么样的操作,也就是Intent对象里面包含的请求内容,请求再由Android操作系统接收到, ...
- 微服务SpringCloud之熔断器
学习SpringCloud微服务是参考纯洁的微笑博客,看到他提到股市的熔断我也忍不住吐槽一下,记得当时实施熔断第一天就熔断了,现在想想也还是搞笑,从之前的全民炒股到现在的全民炒房,都是一个炒字,问题是 ...
- c++学习书籍推荐《清华大学计算机系列教材:数据结构(C++语言版)(第3版)》下载
百度云及其他网盘下载地址:点我 编辑推荐 <清华大学计算机系列教材:数据结构(C++语言版)(第3版)>习题解析涵盖验证型.拓展型.反思型.实践型和研究型习题,总计290余道大题.525道 ...
- 关于int和integer
大家可以看一下下面这个java程序的运行结果 int k = 1; int l = 1; System.out.println(k == l); int a = 128; int b = 128; S ...
- Java编程思想:内部类中级部分
public class Test { public static void main(String[] args) { // Parcel4Test.test(); // Parcel5_1.tes ...
- 「PowerBI」Tabular Editor 一个对中文世界很严重的bug即将修复完成
之前介绍过Tabular Editor这款开源工具,对PowerBI建模来说,非常好用,可以极大的增强自动化水平. 详细可查看此文章: 「PowerBI相关」一款极其优秀的DAX建模工具Tabular ...
- Storm基础知识学习
概述 Storm是一个免费开源的分布式实时计算系统.Storm能轻松可靠地处理无界的数据流,就像Hadoop对数据进行批处理 编程模型 spout:数据读取数据.接收数据.将数据写出到blot bol ...
- [PTA] 数据结构与算法题目集 6-10 二分查找
Position BinarySearch(List L, ElementType X) { int beg = 1; int end = L->Last; while (beg <= e ...