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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript cookie的简单应用
Feb 24 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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实现的MySQL通用查询程序
2007/03/11 PHP
php 如何获取数组第一个值
2013/08/06 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
python redis 删除key脚本的实例
2019/02/19 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
机电专业毕业生推荐信
2013/11/10 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
小学语文教研活动总结
2014/07/01 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
班主任高考寄语
2015/02/26 职场文书
Mysql Show Profile
2021/04/05 MySQL
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
详解Vue的列表渲染
2021/11/20 Vue.js