詳解VUE中的插值( Interpolation)語(yǔ)法
背景分析
在傳統(tǒng)的html頁(yè)面中我們可以定義變量嗎？當(dāng)然不可以，那我們假如希望通過(guò)變量的方式實(shí)現(xiàn)頁(yè)面內(nèi)容的數(shù)據(jù)操作也是不可以的。當(dāng)然我們可以在服務(wù)端通過(guò)定義html標(biāo)簽庫(kù)方式，然后以html作為模板，在服務(wù)端解析也可以實(shí)現(xiàn)，但這樣必須通過(guò)服務(wù)端進(jìn)行處理，才可以做到，能不能通過(guò)一種技術(shù)直接在客戶(hù)端html頁(yè)面中實(shí)現(xiàn)呢？
VUE中的插值語(yǔ)法
這種語(yǔ)法是為了在html中添加變量，借助變量方式與js程序中的變量值進(jìn)行同步，進(jìn)而簡(jiǎn)化代碼編寫(xiě)。其基本語(yǔ)法為：<HTML元素>{{變量或js表達(dá)式}}</HTML元素>
在{{}}內(nèi)部可以寫(xiě):變量、算術(shù)計(jì)算、 三目、 訪問(wèn)數(shù)組元素、 創(chuàng)建對(duì)象、調(diào)用函數(shù)等，總之只要有返回的合法的js變量和表達(dá)式都行。但是不可以寫(xiě)程序結(jié)構(gòu)(分支和循環(huán))以及沒(méi)有返回值的js表達(dá)式。
例如：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <script src='http://www.gepszalag.com/bcjs/js/vue.js'></script></head><body> <div id='app'> <h3>用戶(hù)名:{{username}}</h3> <h3>性別:{{gender==1?'男':'女'}}</h3> <h3>小計(jì):¥{{(price*count).toFixed(2)}}</h3> <h3>下單時(shí)間: {{new Date(orderTime).toLocaleString()}}</h3> <h3>今天星期{{week[new Date().getDay()]}}</h3> </div> <script> new Vue({ el:'#app', data:{ uname:'dingding', gender:1, price:12.5, count:5, orderTime:1600228004389, week:['日','一','二','三','四','五','六'] } }) </script></body></html>
總結(jié)(Summary)
本小節(jié)對(duì)VUE中{{}}語(yǔ)法進(jìn)行了分析，通過(guò)這種語(yǔ)法，為以通過(guò)變量方式操作或同步j(luò)s程序中的數(shù)據(jù)，提供了便利。
到此這篇關(guān)于詳解VUE中的插值( Interpolation)語(yǔ)法的文章就介紹到這了,更多相關(guān)VUE 插值內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）3. PHP循環(huán)與分支知識(shí)點(diǎn)梳理4. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)5. ASP實(shí)現(xiàn)加法驗(yàn)證碼6. ASP基礎(chǔ)入門(mén)第二篇(ASP基礎(chǔ)知識(shí))7. PHP session反序列化漏洞超詳細(xì)講解8. ASP基礎(chǔ)知識(shí)Command對(duì)象講解9. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享10. Spring注入Date類(lèi)型的三種方法總結(jié)
網(wǎng)公網(wǎng)安備