vue雙花括號的使用方法 附練習題
更新時間:2017年11月07日 10:21:08 作者:匿名的girl
這篇文章主要為大家詳細介紹了vue雙花括號的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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í)行運算表達式 --> <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í)行表達式,將表達式的結(jié)果 輸出到當前調(diào)用的元素的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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 詳解vue-router 2.0 常用基礎(chǔ)知識點之router-link
- 詳解vue-router 2.0 常用基礎(chǔ)知識點之router.push()
- VUEJS實戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)
- Vue.js基礎(chǔ)知識匯總
- 詳解vue-router 2.0 常用基礎(chǔ)知識點之導航鉤子
- vue.js入門教程之基礎(chǔ)語法小結(jié)
- 最細致的vue.js基礎(chǔ)語法 值得收藏!
- Vue.js基礎(chǔ)指令實例講解(各種數(shù)據(jù)綁定、表單渲染大總結(jié))
- JavaScript之Vue.js【入門基礎(chǔ)】
- Vue.js 2.0學習教程之從基礎(chǔ)到組件詳解
相關(guān)文章
vue前端實現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項目百分之七十會遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-05-05在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件,支持任務(wù)編輯,資源分配和多種視圖模式,這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下2023-03-03maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實現(xiàn)二維地圖上貼三維模型操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04vue實現(xiàn)過渡動畫Message消息提示組件示例詳解
這篇文章主要為大家介紹了vue實現(xiàn)過渡動畫Message消息提示組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07