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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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 mcrypt可逆加密算法分析
2011/07/19 PHP
调试一段PHP程序时遇到的三个问题
2012/01/17 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
php自动加载代码实例详解
2021/02/26 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Django框架 信号调度原理解析
2019/09/04 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
毕业生就业推荐信范文
2013/12/01 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js