当前位置:首页 > 日记 > 正文

vue模板语法-插值详解

vue模板语法-插值详解

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模板语法-插值详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

浅析JS中的 map, filter, some, ev

浅析JS中的 map, filter, some, ev

电脑软件,map,JS,forEach,filter,1.map有返回值,返回一个新的数组,每个元素为调用func的结果。let list = [1, 2, 3, 4, 5];let other = list.map((d, i) => { return d * 2;});console.log(other);// print: [2, 4, 6, 8, 10]2.filter有返…

react router 4.0以上的路由应用详

react router 4.0以上的路由应用详

路由,详解,电脑软件,react,router,本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下:在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起。<Route component={App}> <Route path=…

利用js查找数组中指定元素并返回该

利用js查找数组中指定元素并返回该

元素,查找,索引,示例,组中,前言这篇文章主要给大家介绍的是利用js查找数组中指定元素并返回该元素的所有索引的相关资料,文中给出了详细的示例代码,下面话不多说,来看看详细的代码示例吧。示例代码//在数组中查找所有出现的x,并返回一个包含匹…

PPT2007中怎样设置若隐若现的半透

PPT2007中怎样设置若隐若现的半透

设置,半透明,若隐若现,背景,效果,  半透明背景效果与水印效果大同小异,给我们一种若隐若现的朦胧美。此效果,不仅可以让文件显得更加的有创意,而且在PPT中还可以为幻灯片增色。以下是小编为您带来的关于PPT2007中设置若隐若现的半透明背景效…

利用Angular+Angular-Ui实现分页(代

利用Angular+Angular-Ui实现分页(代

分页,代码,简单,电脑软件,Angular,今天我们来看看一种只实现分页没有查询的例子吧,先看效果:采用了Angular-UI中的分页组件,关于Angular-UI如何使用请移步这里https://angular-ui.github.io/bootstrap/中的bootstrap章节(其中ui-router等我也建…

微信禁止下拉查看URL的处理方法

微信禁止下拉查看URL的处理方法

处理方法,电脑软件,URL,场景:微信下拉时可以查看到URL,本身是微信的一种安全策略之一,也是一种用户交互友好的体验;效果原理:微信下拉弹性效果其实是浏览器本身的一种特性,重点就是scroll值的一种体现;处理策略:1、直接禁止mobile端的touchmove事件…

wps2016如何设置文档不同页眉

wps2016如何设置文档不同页眉

页眉,文档,方法,设置,如何设置,  在wps编辑文档时,可能由于各章节的标题不同,所以其要求页眉的内容也不同,那么,我们怎样去设置不同章节的页眉呢?下面给大家分享wps2016设置不同页眉的方法,欢迎大家来到学习。wps2016设置不同页眉的方法如图所…

JS简单实现自定义右键菜单实例

JS简单实现自定义右键菜单实例

右键菜单,简单实现,自定义,实例,电脑软件,RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下:<div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>假设我要把上面这个div设置为右键菜单,先随意…

excel做趋势图的方法图解教程

excel做趋势图的方法图解教程

趋势,方法,教程,绘制,电脑软件,  咱们学理工科的学生经常需要处理数据,并作出相应的趋势图。如何作图呢,下面小编来为大家详细介绍做趋势图的图解教程,希望对你有帮助!Excel做趋势图的方法首先,选中数据区域,连名称一起选上。选择插入&mdash;散…

对word2013文档进行加密的两种方法

对word2013文档进行加密的两种方法

文档,方法,加密,两种,电脑软件,  一些情况下需要对office文档进行保护设置,加密就是其中一种很有效的方法,其他保护文档的方法还有限制编辑、限制访问和添加数字签名等。那么下面就由小编给大家分享下对word2013文档进行设置密码的技巧,希望…

怎么在word中制作文档封面在word中

怎么在word中制作文档封面在word中

文档,步骤,方法,封面,电脑软件,  一篇优秀的文档除了内容具体详细外,&ldquo;精致美观&rdquo;也是必不可少的要求之一。一份美观的文档往往能让你在领导心中的印象分提高不少!下面下编教你怎么在word中制作文档封面。在word中制作文档封面…

Vue之Watcher源码解析(1)

Vue之Watcher源码解析(1)

源码,电脑软件,Vue,Watcher,上一节最后再次调用了mount函数,我发现竟然跳到了7000多行的那个函数,之前我还说因为声明早了被覆盖,看来我错了!就是这个函数:// Line-7531 Vue$3.prototype.$mount = function(el, hydrating) { el = el && inB…