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 相关文章推荐
jquery果冻抖动效果实现方法
Jan 15 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
javascript的this关键字详解
May 20 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
keep-alive保持组件状态的方法
Dec 02 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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
destoon官方标签大全
2014/06/20 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
详解vuex的简单使用
2018/03/12 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
联强国际笔试题面试题
2013/07/10 面试题
大学生个人求职口试自我评价
2014/02/16 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
幼师求职自荐信
2014/05/31 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
上班迟到检讨书
2015/05/06 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS