vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作

更新時(shí)間：2020年11月09日 14:12:36 作者：Quincy379

這篇文章主要介紹了vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<style>
  [v-cloak]{
    display:none
  }
</style>

v-cloak v-text v-html

v-cloak用于大段

v-text用于單個(gè)標(biāo)簽

v-html用于帶有標(biāo)簽的處理

補(bǔ)充知識(shí)：vue花括號(hào)數(shù)據(jù)綁定不成功的問(wèn)題

我就廢話不多說(shuō)了，大家還是直接看案例吧~

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--引入vue-->
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引入main-->
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>

  </body>
</html>

main.js如下圖所示，只包含message信息，綁定到id為app的div上。

var app=new Vue({
  el:'#app',
  data:{
    message:'hhh'
  }
})

結(jié)果顯示：

{{message}}

vue.js和自己寫(xiě)的js都在頭部引用，并不能出現(xiàn)理想中的message信息。

更改一下引入順序：

先引入vue.js——再寫(xiě)html內(nèi)容——最后引入自己寫(xiě)的js代碼。成功！原因暫時(shí)還不清楚，待日后填坑…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <body>
    <div id="app">
      <p>{{message}}</p>
    </div>
  </body>
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
</html>

以上這篇vue 防止頁(yè)面加載時(shí)看到花括號(hào)的解決操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue 中mixin 的用法詳解
e中提供了一種混合機(jī)制--mixins，用來(lái)更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用。這篇文章主要介紹了Vue mixin 的用法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼
這篇文章主要介紹了Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決
這篇文章主要介紹了moment轉(zhuǎn)化時(shí)間戳出現(xiàn)Invalid Date的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue package.json文件的使用及說(shuō)明
`package.json`是Node.js和npm項(xiàng)目的核心配置文件,定義了項(xiàng)目的元數(shù)據(jù)和依賴(lài)項(xiàng),在Vue項(xiàng)目中,它管理依賴(lài)、提供腳本命令、存儲(chǔ)項(xiàng)目信息,并通過(guò)語(yǔ)義化版本控制確保項(xiàng)目穩(wěn)定
2025-01-01
vue.js框架實(shí)現(xiàn)表單排序和分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue.js框架實(shí)現(xiàn)表單排序和分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue父組件調(diào)用子組件事件方法
下面小編就為大家分享一篇Vue父組件調(diào)用子組件事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue項(xiàng)目在打包時(shí),如何去掉所有的console.log輸出
這篇文章主要介紹了vue項(xiàng)目在打包時(shí),如何去掉所有的console.log輸出，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果實(shí)例代碼詳解
GASP是一個(gè)JavaScript動(dòng)畫(huà)庫(kù)，它支持快速開(kāi)發(fā)高性能的 Web 動(dòng)畫(huà)。GASP 使我們能夠輕松輕松快速的將動(dòng)畫(huà)串在一起，來(lái)創(chuàng)造一個(gè)高內(nèi)聚的流暢動(dòng)畫(huà)序列。這篇文章主要介紹了通過(guò)GASP讓vue實(shí)現(xiàn)動(dòng)態(tài)效果,需要的朋友可以參考下
2019-11-11