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 html()等方法介绍
Nov 18 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP 数组遍历顺序理解
2009/09/09 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php返回字符串中所有单词的方法
2015/03/09 PHP
php关键字仅替换一次的实现函数
2015/10/29 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python list语法学习(带例子)
2013/11/01 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
简单了解Python write writelines区别
2020/02/27 Python
浅谈django 重载str 方法
2020/05/19 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
委托书模板
2014/04/04 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL