成都网站建设 冠辰,h5 WordPress,个人网站域名选择,湖北潜江信息网模板语法v-html
vue使用一种基于HTML的模板语法#xff0c;使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上#xff0c;所有的vue模板都是语法层面的HTML#xff0c;可以被符合规范的浏览器和HTML解释器解析。
一.文本插值
最基本的数据绑定形式是文本插值#…模板语法v-html
vue使用一种基于HTML的模板语法使我们能够声明式的将其组件实例的数据绑定到呈现的DOM上所有的vue模板都是语法层面的HTML可以被符合规范的浏览器和HTML解释器解析。
一.文本插值
最基本的数据绑定形式是文本插值它使用的是“Mustache”语法即双大括号 代码片段
template
div{{ msg }}/div
/templatescript
export default {data() {return {msg: Hello, Vue!}}
}
/script运行结果
二.使用JavaScript表达式
每一个绑定仅支持单一表达式也就是一段能被求值的JavaScript的代码一个简单的判断方法是是否可以合法的写在return后面。
template
p{{number 1}}/p
p{{ok? YES : NO}}/p
!-- 字符串翻转 --
p{{ Message.split().reverse().join() }}/p/templatescript
export default {data() {return {number:10,ok:true,Message:hello world}}
}
/script运行结果 无效情况原因是不满足单一表达式
三.元素HTML
双大括号将会将数据插值为纯文本而不是HTML,需要使用v-html指令。
template
p纯文本{{ rawHtml }}/p
p属性span v-htmlrawHtml/span/p
/templatescript
export default {data() {return {rawHtml: span stylecolor: redThis is some strongraw HTML/strong/span}}
}
/script运行结果
