VUE中插值表达式、v-text和v-html的区别

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代码