用vue语法写html,Vue -- 模板语法

本文介绍了Vue的模板语法,包括Mustache的大胡子语法、v-text指令和v-html指令的使用,强调了大胡子语法的限制、v-text的替换功能以及v-html的HTML标签渲染和XSS攻击风险。
摘要由CSDN通过智能技术生成

Vue 模板语法

1.vue 和大多数后台语言,甚至是和art-template 这种前端模板库一样,都有一套,特定的语法来把数据渲染在html上。

Mustache -- 大胡子语法

1.大胡子的语法格式双大括号'{ {}}',用在html标签之间,不能写在标签属性中

2.大胡子语法中可以使用js表达式,但只限于Vue实例作用域的和Vue沙盒白名单,白名单规定的一些全局变量例如Math和FDate。

3.表达式一些基本表达式,和一些三元运算例如:

'{ {num + 1}}'、'{ {status ? 'succeed' : 'failed'}}'

'{ {changeTime()}}'、'{value.replace(/,/g,"")}'

4.但不支持流控制例如:'{ { if (ok) { return message } }}'

大胡子语法案例

Title

{ {msg}}

var vm = new Vue({

el:"#app",

data:{

msg:"将会被大胡子语法渲染"

}

})

v-text -- 模板渲染

1.v-text 能展示对应data中数据内容,也能在数据基础上做运算

2.v-text 会吧标,签中的内容替换

v-text -- 使用案例

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值