詳解VUE中的插值( Interpolation)語法
背景分析
在傳統(tǒng)的html頁面中我們可以定義變量嗎？當(dāng)然不可以，那我們假如希望通過變量的方式實(shí)現(xiàn)頁面內(nèi)容的數(shù)據(jù)操作也是不可以的。當(dāng)然我們可以在服務(wù)端通過定義html標(biāo)簽庫方式，然后以html作為模板，在服務(wù)端解析也可以實(shí)現(xiàn)，但這樣必須通過服務(wù)端進(jìn)行處理，才可以做到，能不能通過一種技術(shù)直接在客戶端html頁面中實(shí)現(xiàn)呢？
VUE中的插值語法
這種語法是為了在html中添加變量，借助變量方式與js程序中的變量值進(jìn)行同步，進(jìn)而簡化代碼編寫。其基本語法為：<HTML元素>{{變量或js表達(dá)式}}</HTML元素>
在{{}}內(nèi)部可以寫:變量、算術(shù)計(jì)算、 三目、 訪問數(shù)組元素、 創(chuàng)建對(duì)象、調(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://www.leifengta.com.cn/bcjs/js/vue.js'></script></head><body> <div id='app'> <h3>用戶名:{{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中{{}}語法進(jìn)行了分析，通過這種語法，為以通過變量方式操作或同步j(luò)s程序中的數(shù)據(jù)，提供了便利。
到此這篇關(guān)于詳解VUE中的插值( Interpolation)語法的文章就介紹到這了,更多相關(guān)VUE 插值內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 解決Android studio xml界面無法預(yù)覽問題2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 詳解Android studio 動(dòng)態(tài)fragment的用法4. Android如何加載Base64編碼格式圖片5. 圖文詳解vue中proto文件的函數(shù)調(diào)用6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)7. 什么是python的自省8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. Vuex localStorage的具體使用10. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)
網(wǎng)公網(wǎng)安備