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 Konami Code 实现代码
Jul 29 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
Vue.js中的高级面试题及答案
Jan 13 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
php学习之 循环结构实现代码
2011/06/09 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jQuery的缓存机制浅析
2014/06/07 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
Python学习笔记_数据排序方法
2014/05/22 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python命令行解析模块详解
2018/02/01 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Django admin组件的使用
2020/10/24 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
工会主席岗位责任制
2014/02/11 职场文书
中秋手机店促销方案
2014/06/16 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python