詳解VUE中的插值( Interpolation)語(yǔ)法

更新時(shí)間：2020年10月18日 11:28:11 作者：龔生

這篇文章主要介紹了詳解VUE中的插值( Interpolation)語(yǔ)法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

背景分析

在傳統(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

VUE
插值

相關(guān)文章

Vue數(shù)據(jù)綁定實(shí)例寫法
在本篇文章里小編給大家整理的是關(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
Vue 2中ref屬性的使用方法及注意事項(xiàng)
這篇文章主要給大家介紹了關(guān)于Vue 2中ref屬性的使用方法及注意事項(xiàng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-06-06
vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問(wèn)標(biāo)點(diǎn)操作
這篇文章主要介紹了vue.js 輸入框輸入值自動(dòng)過(guò)濾特殊字符替換中問(wèn)標(biāo)點(diǎn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
圖文介紹Vue父組件向子組件傳值
本文通過(guò)實(shí)例代碼給大家詳細(xì)分享了Vue父組件向子組件傳值的過(guò)程以及關(guān)鍵點(diǎn)講解，一起學(xué)習(xí)參考下吧。
2018-02-02
vue webpack打包優(yōu)化操作技巧
webpack是react項(xiàng)目標(biāo)配的打包工具，和NPM搭配起來(lái)使用管理模塊實(shí)在非常方便。這篇文章主要介紹了webpack打包優(yōu)化（VUE Project）,需要的朋友可以參考下
2018-02-02
Vue前端vue.config.js簡(jiǎn)介
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í)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05