vue教程:模板语法

news/2024/7/10 0:47:22 标签: vue

如果想显示{{}}标签,而不进行替换,使用 v-pre即可跳过这个元素和它的子元素的编译过程。

Vue.js只支持单个表达式,不支持语句和流控制。另外,在表达式中,不能使用用户自定义的全局变量,只能使用Vue白名单内的全局变量,例如Math和Date。 

文本:

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:

var obj = {
    foo: 'bar',
    rawHtml: '<span style="color:red">This is should be red!</span>'
}

let vm = new Vue({
    el: '#app',
    data: obj
})
<p v-once>{{foo}}</p>

 原始 HTML:

双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令:

var obj = {
    foo: 'bar',
    rawHtml: '<span style="color:red">This is should be red!</span>'
}

let vm = new Vue({
    el: '#app',
    data: obj
})
<p v-html="rawHtml"></p>

 这个 span 的内容将会被替换成为属性值 rawHtml,直接作为 HTML——会忽略解析属性值中的数据绑定。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位。

特性:

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

使用 JavaScript 表达式:

实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。有个限制就是,每个绑定都只能包含单个表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}

 指令:

指令必须添加在一个元素上,指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)

<p v-if="seen">现在你看到我了</p>

另外,指令可以绑定属性:

<a v-bind:href="url">...</a>

 


http://www.niftyadmin.cn/n/887076.html

相关文章

jsp页面展示小数_Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面

1. 什么是 Thymeleaf &#xff1f;虽然我们目前拥有许多十分优秀的前端框架&#xff0c;例如&#xff1a; Vue 、 React 等&#xff0c;非常适用于前后端分离的场景&#xff0c;前端可以独立部署成为服务&#xff0c;前后端从物理上完全进行隔离&#xff0c;降低程序耦合度。但…

跨域请求携带cookie

function ajaxPostRequestCipherMachine(url, param) {var url url;var dict {ret : false,errmsg : 请求失败};var jsonData param;$.ajax({type : "POST",url : url,async : false,data : jsonData,dataType : json,timeout : 10000,crossDomain:true, //设置跨…

状态输出导航栏html,CSS导航条菜单的实现

.blue#slatenavullia:hover,.blue#slatenavullia.current上图代码的注解为&#xff1a;id为menu中的ul的li。也就是导航栏里的每一个元素。鼠标放上去后会出来的效果。在后面又加了ul说明弹出的是一个ul元素整个这里面的css就是规定这个ul元素里的样式。说白了就是鼠标划过导航…

vue之事件处理

事件冒泡&#xff1a; stop修饰符&#xff1a;阻止事件冒泡&#xff0c;用于子元素上。 事件冒泡&#xff1a;当父元素和子元素同时绑定了事件时&#xff0c;子元素先触发事件&#xff0c;父元素再触发事件&#xff0c;这是大多数浏览器的默认行为。 <div id"app-3&…

tv英语域名注册_Sedo榜:域名just.me以33万元领衔

西部数码(west.cn)10月10日&#xff0c;新一期的sedo域名交易榜上共89个域名超2000美元成交。其中&#xff0c;英文域名cene.com以12,500美元成交&#xff0c;约合人民币8.4万元&#xff1b;国别域名just.me则以50,000美元易主&#xff0c;约合人民币33万元。域名cene.com注册于…

html5新增的标签是什么,HTML5中新增的一些标签和描述

最近有抽一些时间来研究HTML/CSS&#xff0c;当然包括了HTML5和CSS3了&#xff0c;因为毕竟是最新的技术嘛&#xff0c;相对于java来说是要简单一些&#xff0c;但是如果你要贯通整个系统来学习&#xff0c;那还是有一定的难度的。那么今天智言就列举出了几个HTML5中的一些新标…

vm表单输入绑定之修饰符:.lazy、.number、.trim

.lazy&#xff1a; 在输入框中&#xff0c;v-model 默认是同步数据&#xff0c;使用 .lazy 会转变为在 change 事件中同步 &#xff0c;也就是在失去焦点 或者 按下回车键时才更新。 .number&#xff1a; 修饰符可以将 输入的值转化为Number类型 &#xff0c;否则虽然你输入…

h5外卖源码php_微前端在美团外卖的实践

微前端是微服务理念在前端的应用。之前我们给大家介绍过微前端在美团HR系统和美团闪购的实践文章。今天的文章来自美团外卖广告团队&#xff0c;他们参考业界优秀方案&#xff0c;同时也深度结合了广告端实际业务的情况&#xff0c;提出了基于React的中心路由基座式微前端方案。…