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>