VUE中插值表达式、v-text和v-html的区别
三者之前有一定的不同,要加以区分用在适当的地方
1、插值表达式
插值表达式应用的范围较广,相当于一个占位符,
缺点:使用插值表达式当网速较慢的时候会先显示插值原始字符的内容{{message}}
解决方法:在标签内使用v-cloak进行解决,使用v-cloak在加载完成之前会显示空白
1、插值表达式还可以做运算
2、可以显示三元表达式
3、可以使用简单的js方法
<template>
<div>
{{ message }}
<p>{{number+1}}</p> //显示4
<p>{{ flag?"yes":"no"}}</p> //yes
<p>{{ message.split("").reverse().join("")}}</p> //olleh
</div>
</template>
<script>
export default {
data() {
return {
message: "hello",
number:3
flag:true
};
}
};
</script>
2、v-text
v-text 会覆盖标签内原有的内容
<p v-text="message">aaaaaaa</p>
这里标签内aaaa就会被message对应内容覆盖
3、v-html
v-html与v-text相似,但是更强一点可以处理html代码