詳解VUE中的插值( Interpolation)語法
背景分析
在傳統(tǒng)的html頁(yè)面中我們可以定義變量嗎？當(dāng)然不可以，那我們假如希望通過變量的方式實(shí)現(xiàn)頁(yè)面內(nèi)容的數(shù)據(jù)操作也是不可以的。當(dāng)然我們可以在服務(wù)端通過定義html標(biāo)簽庫(kù)方式，然后以html作為模板，在服務(wù)端解析也可以實(shí)現(xiàn)，但這樣必須通過服務(wù)端進(jìn)行處理，才可以做到，能不能通過一種技術(shù)直接在客戶端html頁(yè)面中實(shí)現(xiàn)呢？
VUE中的插值語法
這種語法是為了在html中添加變量，借助變量方式與js程序中的變量值進(jìn)行同步，進(jìn)而簡(jiǎ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="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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫法以及相關(guān)知識(shí)點(diǎn)，需要的朋友們學(xué)習(xí)下。2019-08-08
Vue?warn:Property?"state"?was?accessed?during
這篇文章主要為大家介紹了Vue?warn:Property?"state"?was?accessed?during?render的報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
vue使用jsMind思維導(dǎo)圖的實(shí)戰(zhàn)指南
jsMind是一個(gè)顯示/編輯思維導(dǎo)圖的純javascript類庫(kù),其基于 html5的canvas進(jìn)行設(shè)計(jì),這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue 2中ref屬性的使用方法及注意事項(xiàng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作
這篇文章主要介紹了vue.js 輸入框輸入值自動(dòng)過濾特殊字符替換中問標(biāo)點(diǎn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文通過實(shí)例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過程以及關(guān)鍵點(diǎn)講解，一起學(xué)習(xí)參考下吧。2018-02-02
webpack是react項(xiàng)目標(biāo)配的打包工具，和NPM搭配起來使用管理模塊實(shí)在非常方便。這篇文章主要介紹了webpack打包優(yōu)化（VUE Project）,需要的朋友可以參考下2018-02-02
vue.config.js?是一個(gè)可選的配置文件，如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件，那么它會(huì)被?@vue/cli-service?自動(dòng)加載，本文重點(diǎn)介紹VUE前端vue.config.js簡(jiǎn)介，感興趣的朋友跟隨小編一起看看吧2023-01-01
Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue elementUI table 自定義表頭和行合并的實(shí)例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05