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