Vue中使用差值表达式{{}} , 差值闪烁问题

举例:

<template>
  <div>
      <h1>{{ name.substring(1) }} 很是帅</h1>
      <h1>有{{ num*2 }}位 {{ hhh }} 为{{ name }}着迷</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'赫哥',
      num:1,
      hhh:'女神'
    }
  },
}
</script>

<style>

</style>

在网速慢的状况下，就会出现代码。

可用谷歌进行能够改变网速,查看问题:

解决方法：使用v-test or v-html标签

<template>
  <div>
      <h1 v-test="name.substring(1)"> 很是帅</h1>
      <div  v-html="hhh"> </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:'赫哥',
      hhh:'<h1>有2位女神为赫哥着迷</h1>'
    }
  },
}
</script>

<style>

</style>