詳解VUE中的插值( Interpolation)語法
背景分析
在傳統的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='http://m.4tl426be.cn/bcjs/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 插值內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
網公網安備