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