詳解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="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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家介紹了Vue中使用Swiper簡單封裝組件示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼
這篇文章主要介紹了vue el-tree 默認(rèn)展開第一個節(jié)點的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
Vue3+TS實現(xiàn)動態(tài)路由權(quán)限的示例詳解
當(dāng)我們在開發(fā)一個大型的前端應(yīng)用時,動態(tài)路由權(quán)限是一個必不可少的功能,本文將介紹如何使用Vue 3和TypeScript來實現(xiàn)動態(tài)路由權(quán)限,希望對大家有所幫助2024-01-01
vue實現(xiàn)將一維數(shù)組變換為三維數(shù)組
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)將一維數(shù)組變換為三維數(shù)組,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內(nèi)容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
組件是 vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06