vue.js實現(xiàn)插入數(shù)值與表達式的方法分析
更新時間：2018年07月06日 11:01:32 作者：-老K-
這篇文章主要介紹了vue.js實現(xiàn)插入數(shù)值與表達式的方法,結合實例形式分析了vue.js常見的3種插入數(shù)值實現(xiàn)方式,并總結了vue.js插值與表達式相關使用技巧,需要的朋友可以參考下
本文實例講述了vue.js實現(xiàn)插入數(shù)值與表達式的方法。分享給大家供大家參考，具體如下：
vue.js在插入數(shù)值的時候有三種方式
1、插入純文本
插入純文本是最簡單的方式，使用雙大括號就能插入想要的值。
<span>{{ msg }}</span>
mustache也可以在屬性中使用
<div id="item-{{ id }}"></div>
就能顯示所需要顯示的文本信息了。但是有時候，我們想要插入的html文本，這時候要怎么辦呢？在插入html的時候有兩種方式，一種是用三個大括號的形式，這種是在vue.js 1.x 版本時候使用較多，但是在vue.js 2.x 的時候，插入純文本的時候開始使用v-html的形式。
2、插入html
<span>{{{ msg }}}</span> // vue.js 1.x 版本
<div v-html="msg"></div> // vue.js 2.x版本
被插入的內容都會被當做 HTML —— 數(shù)據(jù)綁定會被忽略。注意，你不能使用 v-html 來復合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔任 UI 重用與復合的基本單元。此外不建議將用戶輸入的值直接作為html顯示，這樣有可能會造成XSS攻擊。對用用戶輸入顯示的值一定要做必要的過濾之后才能真正顯示。
3、屬性
對于雙大括號，不能在html屬性中使用，對于屬性，使用v-bind 來綁定數(shù)據(jù)。
<div v-bind:id="dynamicId"></div> <div :id="dynamicId"></div> // 簡寫形式
附：vue.js插值與表達式示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--# 使用大括號(Mustache 語法) “{{ }}”是最基本的文本插值方法，它會自動將我們雙向綁定的詩句實時顯示出來 #-->
{{ book }}
</div>
</body>
</html>
<script>
var myData = {
book:'《vue.js實戰(zhàn)》'
};
var app = new Vue({
el:'#app',
data:myData
})
</script>
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟
三維網(wǎng)格圖廣泛應用于科學可視化、醫(yī)學成像、工程設計等領域,用于展示復雜的數(shù)據(jù)結構和空間分布,本文給大家介紹了使用Vue3和Plotly.js打造一個3D圖在線展示的實現(xiàn)步驟,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
大文件下載,花費的時間比較長,沒有任何提示,用戶體驗很差,需要優(yōu)化,提示文件在下載中,并且顯示進度百分比,下面小編給大家?guī)砹薞ue項目實現(xiàn)文件下載進度條功能,感興趣的朋友一起看看吧2024-03-03
vue實現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應用場景）
這篇文章主要介紹了vue實現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應用場景），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了Vue生命周期和數(shù)據(jù)共享，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
數(shù)據(jù)的重要性我們大家都知道，就算再小的項目中都可能使用幾個圖表展示，我最近在做項目的過程中也是需要用到圖表，最后選擇了echarts圖表庫，這篇文章主要介紹了Vue使用Echarts畫柱狀圖2022-12-12
眾所周知Element是一套Vue.js后臺組件庫,它能夠幫助你更輕松更快速地開發(fā)后臺項目,下面這篇文章主要給大家介紹了關于使用Element進行前端開發(fā)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題
這篇文章主要介紹了vue優(yōu)化之優(yōu)雅的拋出錯誤(Error)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了vue?electron實現(xiàn)無邊框窗口示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調用過濾器,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue實現(xiàn)flv格式視頻播放,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07