vue数据绑定html
html标签的纯文本显示/被当做html标签处理;
1)使用两个大括号时,假如字符串内容是html标签,那么不会被转义;
2)使用三个大括号时,字符串内的html标签会被直接转义
a.两个大括号:
<div id="app">
{{html}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
输出结果:
<span>span</span>
b.三个大括号:
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
输出:
span
3)插入内容的数据绑定无效(在没有用partials的情况下),使用两个大括号,三个大括号
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html: "<span>span{{val}}</span>",
val: "11"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
输出:
span{{val}}
说明没有数据绑定。
4)禁止在用户提交的内容上动态渲染,否则会受到XSS攻击
5)插值也可以用在html标签的属性中,例如class,或者id,或者其他。
但是Vue.js的指令和特殊性内是不可以用插值的。
vue数据绑定html的更多相关文章
- Vue数据绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- 17: VUE数据绑定 与 Object.defineProperty
VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
- Vue数据绑定(一)
Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
- (三)vue数据绑定及相应的命令
vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
- 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
- vue数据绑定原理
一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- vue数据绑定数组,改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa i ...
随机推荐
- pycharm乱码
1.文件编码类型 2.查看IDE编码类型
- HttpFlexSession注册失败的怪问题
web.xml中已经注册了HttpFlexSession <listener> <listener-class>flex.messaging.HttpFlexSession&l ...
- mysql-sql命令
##本单元目标 一.为什么要学习数据库 二.数据库的相关概念 DBMS.DB.SQL 三.数据库存储数据的特点 四.初始MySQL MySQL产品的介绍 MySQL产品的安装 ★ MySQL服务的启动 ...
- Python函数(1)
一.Python函数介绍 函数时组织好的,可重复的,用来实现单一,或相关联功能的代码段. 函数的使用原则时先定义,后调用:事先准备工具的过程即函数的定义,遇到应用场景拿来当工具用即函数的调用. 函数的 ...
- nProtect APPGuard安卓反外挂分析
工具与环境: IDA7.0 JEB2.2.5 Nexus 5 Android 4.4 目录: 一:app简单分析与java层反编译 二: compatible.so反调试与反反调试 三: compat ...
- C++常用字符串分割方法(转)
1.用strtok函数进行字符串分割 原型: char *strtok(char *str, const char *delim); 功能:分解字符串为一组字符串. 参数说明:str为要分解的字符串, ...
- SPFieldLookupValue class
using System; using Microsoft.SharePoint; namespace ConsoleApp { class Program { static void Main(st ...
- java工程师要求
高级JAVA研发工程师 8000-15000元/月 职位信息 职位描述 岗位要求:1.五年以上软件研发经验,两年以上软件架构设计经验:2.精通weblogic.jboss tomcat.websphe ...
- 初识Python(四)
一.数字数据类型 Python的数字数据类型用于存储数值,它是不可变的数据类型,这意味着改变数字数据类型,则需要一个新分配的对象: Python支持四种不同的数值类型: 整型(Int):通常被称为是整 ...
- java 中的Number类 Character类 String类 StringBuffer类 StringBuilder类
1. Number类 Java语言为每一个内置数据类型提供了对应的包装类.所有的包装类(Integer.Long.Byte.Double.Float.Short)都是抽象类Number的子类.这种由编 ...