- 注:除了插值表达式之外所有的指令都是用是类似属性的方式进行写入
v-text
使用方式::v-text='定义好的变量名称'
作用和插值类似,都是为双标签添加展示内容,但是v-text是将指定的属性完全的替换标签之间的内容,而不管标签之间有什么
<div class="text">
//插值表达式使用:
<p>{{msg + 'aaa'}}</p>
v-text指令使用:
<p v-text='msg'>{{name}}</p>
<!-- 使用细节 -->
//通用和插值表达式一样,所有指令都可以进行简单的拼串,运算,js代码
注意: 拼串的字符要加 " "
<p v-text='msg+"你好"'></p>
<p v-text='msg.toUpperCase()'></p>
<p v-text='age + 1'></p>
<p v-text='age>18?"成年":"未成年"'></p>
</div>
v-html
使用方法 :v-html=' 变量 '
作用:可以解析html结构,既是可以解析字符串内的标签等html写法,并作为网页html结构插入标签内起作用,它只能解析html,js不可以
为了输出真正的 HTML ,你需要使用 v-html 指令:
例如:
<template>
<div v-html="rawHtml"></div>
</template>
<script>
export default {
data(){
return {
rawHtml:'<h1>hello world</h1>'
}
}
})
</script>
ps: 被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}一样
-使用场景:以后可以接收从服务器返回的html结构代码并进行解析,在页面中展示