快捷導(dǎo)航

vue 防止頁面加載時看到花括號的解決操作

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

這篇文章主要介紹了vue 防止頁面加載時看到花括號的解決操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

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

v-cloak v-text v-html

v-cloak用于大段

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

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

補充知識：vue花括號數(shù)據(jù)綁定不成功的問題

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

<!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和自己寫的js都在頭部引用，并不能出現(xiàn)理想中的message信息。

更改一下引入順序：

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

<!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 防止頁面加載時看到花括號的解決操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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