快捷導(dǎo)航

vue雙花括號的使用方法附練習(xí)題

更新時間：2017年11月07日 10:21:08 作者：匿名的girl

這篇文章主要為大家詳細(xì)介紹了vue雙花括號的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue雙花括號的具體代碼，供大家參考，具體內(nèi)容如下

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>{{}}的使用</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
  <h1>{{msg}}</h1>
  <h4>{{cart.brand}}</h4>
 <!--在雙花括號中 執(zhí)行運(yùn)算表達(dá)式 -->
 <p> 3 + 5 = {{ 3 + 5 }}</p>
 </div>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    cart:{
     brand:"Volvo",price:30
    }
   }
  })
 </script>
 </body>
</html>

代碼：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>雙花括號的練習(xí)</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div>
 雙花括號:執(zhí)行表達(dá)式,將表達(dá)式的結(jié)果 輸出到當(dāng)前調(diào)用的元素的innerHTML中
 </div>
 <div id="container">{{msg}}
  <h4>三目運(yùn)算3>5:{{3>5?"對":"錯"}}</h4>
  <h4>邏輯運(yùn)算3>5 && 2>1:{{3>5 && 2>1}}</h4>
  <h4>{{!hasMore}}</h4>
  <h4>{{totalNum>count?"大于":"小于"}}</h4>
 </div>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    count:3,
    totalNum:10,
    hasMore:true
   }
  })
 </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法
本篇文章主要介紹了詳解vue 中使用 AJAX獲取數(shù)據(jù)的方法，在VUE開發(fā)時，數(shù)據(jù)可以使用jquery和vue-resource來獲取數(shù)據(jù)，有興趣的可以了解一下。
2017-01-01
vue中標(biāo)簽自定義屬性的使用及說明
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue中偵聽器的基本用法示例
隨著Vue的使用越來越多,對Vue的其他知識點(diǎn)也開始逐漸多了解一點(diǎn),這次做頁面上的計(jì)算,用了Watch偵聽器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽器基本用法的相關(guān)資料,需要的朋友可以參考下
2021-08-08
Vue實(shí)現(xiàn)監(jiān)聽某個元素滾動,親測有效
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽某個元素滾動,親測有效！具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue項(xiàng)目中Element UI組件未注冊的問題原因及解決方法
在 Vue 項(xiàng)目中使用 Element UI 組件庫時,開發(fā)者可能會遇到一些常見問題,例如組件未正確注冊導(dǎo)致的警告或錯誤,本文將詳細(xì)探討這些問題的原因、解決方法,以及如何在需要時撤銷相關(guān)操作,需要的朋友可以參考下
2025-01-01
一次VUE項(xiàng)目中遇到XSS攻擊的實(shí)戰(zhàn)記錄
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項(xiàng)目中遇到XSS攻擊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
vue使用腳手架vue-cli創(chuàng)建并引入自定義組件
這篇文章介紹了vue使用腳手架vue-cli創(chuàng)建并引入自定義組件的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
vue2.0使用md-edit編輯器的過程
這篇文章主要介紹了vue2.0+使用md-edit編輯器的解決方案，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2024-02-02
vue中的插槽詳解
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-10-10
在vue中實(shí)現(xiàn)嵌套頁面(iframe)
這篇文章主要介紹了在vue中實(shí)現(xiàn)嵌套頁面(iframe)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07