詳解VUE中的插值( Interpolation)語法
阿新 • • 發佈：2020-10-19
背景分析
在傳統的html頁面中我們可以定義變數嗎？當然不可以，那我們假如希望通過變數的方式實現頁面內容的資料操作也是不可以的。當然我們可以在服務端通過定義html標籤庫方式，然後以html作為模板，在服務端解析也可以實現，但這樣必須通過服務端進行處理，才可以做到，能不能通過一種技術直接在客戶端html頁面中實現呢？
VUE中的插值語法
這種語法是為了在html中新增變數，藉助變數方式與js程式中的變數值進行同步，進而簡化程式碼編寫。其基本語法為：
<HTML元素>{{變數或js表示式}}</HTML元素>
在{{}}內部可以寫:變數、算術計算、 三目、 訪問陣列元素、 建立物件、呼叫函式等，總之只要有返回的合法的js變數和表示式都行。但是不可以寫程式結構(分支和迴圈)以及沒有返回值的js表示式。
例如：
<!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>總結(Summary)
本小節對VUE中{{}}語法進行了分析，通過這種語法，為以通過變數方式操作或同步js程式中的資料，提供了便利。
到此這篇關於詳解VUE中的插值( Interpolation)語法的文章就介紹到這了,更多相關VUE 插值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！