vue雙花括號的使用方法附練習題

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

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

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

<!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í)行運算表達式 -->
 <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>雙花括號的練習</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div>
 雙花括號:執(zhí)行表達式,將表達式的結果 輸出到當前調用的元素的innerHTML中
 </div>
 <div id="container">{{msg}}
  <h4>三目運算3>5:{{3>5?"對":"錯"}}</h4>
  <h4>邏輯運算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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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