詳解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ù)直接在客戶端html頁(yè)面中實(shí)現(xiàn)呢？
VUE中的插值語(yǔ)法
這種語(yǔ)法是為了在html中添加變量，借助變量方式與js程序中的變量值進(jìn)行同步，進(jìn)而簡(jiǎn)化代碼編寫。其基本語(yǔ)法為：
<HTML元素>{{變量或js表達(dá)式}}</HTML元素>
在{{}}內(nèi)部可以寫:變量、算術(shù)計(jì)算、 三目、 訪問(wèn)數(shù)組元素、 創(chuàng)建對(duì)象、調(diào)用函數(shù)等，總之只要有返回的合法的js變量和表達(dá)式都行。但是不可以寫程序結(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="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中{{}}語(yǔ)法進(jìn)行了分析，通過(guò)這種語(yǔ)法，為以通過(guò)變量方式操作或同步j(luò)s程序中的數(shù)據(jù)，提供了便利。
到此這篇關(guān)于詳解VUE中的插值( Interpolation)語(yǔ)法的文章就介紹到這了,更多相關(guān)VUE 插值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級(jí)使用避坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家介紹了Vue中使用Swiper簡(jiǎn)單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
基于Vuejs實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購(gòu)物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
vue el-tree 默認(rèn)展開第一個(gè)節(jié)點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認(rèn)展開第一個(gè)節(jié)點(diǎn)的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
Vue3+TS實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限的示例詳解
當(dāng)我們?cè)陂_發(fā)一個(gè)大型的前端應(yīng)用時(shí),動(dòng)態(tài)路由權(quán)限是一個(gè)必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來(lái)實(shí)現(xiàn)動(dòng)態(tài)路由權(quán)限,希望對(duì)大家有所幫助2024-01-01
vue實(shí)現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06