詳解VUE中的插值( Interpolation)語法
背景分析
在傳統(tǒng)的html頁面中我們可以定義變量嗎？當(dāng)然不可以，那我們假如希望通過變量的方式實現(xiàn)頁面內(nèi)容的數(shù)據(jù)操作也是不可以的。當(dāng)然我們可以在服務(wù)端通過定義html標(biāo)簽庫方式，然后以html作為模板，在服務(wù)端解析也可以實現(xiàn)，但這樣必須通過服務(wù)端進(jìn)行處理，才可以做到，能不能通過一種技術(shù)直接在客戶端html頁面中實現(xiàn)呢？
VUE中的插值語法
這種語法是為了在html中添加變量，借助變量方式與js程序中的變量值進(jìn)行同步，進(jìn)而簡化代碼編寫。其基本語法為：<HTML元素>{{變量或js表達(dá)式}}</HTML元素>
在{{}}內(nèi)部可以寫:變量、算術(shù)計算、 三目、 訪問數(shù)組元素、 創(chuàng)建對象、調(diào)用函數(shù)等，總之只要有返回的合法的js變量和表達(dá)式都行。但是不可以寫程序結(jié)構(gòu)(分支和循環(huán))以及沒有返回值的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://m.lshqa.cn/bcjs/js/vue.js'></script></head><body> <div id='app'> <h3>用戶名:{{username}}</h3> <h3>性別:{{gender==1?'男':'女'}}</h3> <h3>小計:¥{{(price*count).toFixed(2)}}</h3> <h3>下單時間: {{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é)對VUE中{{}}語法進(jìn)行了分析，通過這種語法，為以通過變量方式操作或同步j(luò)s程序中的數(shù)據(jù)，提供了便利。
到此這篇關(guān)于詳解VUE中的插值( Interpolation)語法的文章就介紹到這了,更多相關(guān)VUE 插值內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備