vue模板语法-插值详解


Posted in Javascript onMarch 06, 2017

1.文本

数据绑定最常见的形式就是使用‘Mustache'语法(双打括号)的文本插值:

<span>message:{{msg}}</span>

使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新。

但请留心这回影响到该节点上所有的数据绑定:

<span v-once>this will nver change:{{message}}</span>

2.纯html

双打括号会将数据解释为纯文本,而非html。为了输出html可以使用v-html指令:

<div v-html="rawhtml"></div>

被插入的内容被当做HTML---数据绑定会被忽略。注意,你不能使用v-html来

复合局部模版,因为vue不是基于字符串的模版引擎。组件更适合单人UI重用与复合的基本单元。

站点上动态渲染的任意html可能会非常危险,因为它会很容易导致XSS攻击。

请只对可信内容使用html插值,绝不要对用户提供的内容插值。

3.属性

Mustache不能在html属性中使用,应使用v-bind指令;

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效--如果条件被求值为flase的话该属性被移除

<button v-bind:disabled="someDynamicCondition">Button</button>

4.使用JavaScript表达式

迄今为止,在我们的模版中我们一直都值绑定简单的属性键值。但实际上,对于

所有的数据绑定,Vue.js都提供了完全的Javascript表达式支持

{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>

这些表达式会在所属vue实例的数据作用域下作为哦JavaScript被解析。

每个限制就是,每个绑定都只能包含单个表达式,所以下面不会生效

//这句是语句不是表达式
{{var a = 1}}
//流控制也不会生效,请使用三元表达式
{{if(ok){return message}}}

模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date。

不应该在模板表达式中试图访问用户自定义的全局变量

以上所述是小编给大家介绍的vue模板语法-插值详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
js中的面向对象入门
Mar 06 #Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 #Javascript
Vue 2.x教程之基础API
Mar 06 #Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 #Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 #Javascript
JavaScript函数参数的传递方式详解
Mar 06 #Javascript
jQuery实现遍历复选框的方法示例
Mar 06 #Javascript
You might like
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python 读写中文json的实例详解
2017/10/29 Python
python如何实现DES加密
2020/09/21 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
如何理解委托
2012/01/06 面试题
护理学中专毕业生求职信
2013/11/11 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
婚前协议书怎么写
2014/04/15 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
大学生自荐信范文
2015/03/05 职场文书
入党介绍人意见范文
2015/06/01 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python