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)文章
Proxy是ES6引入的一個(gè)新特性，它允許你創(chuàng)建一個(gè)代理對(duì)象，用于攔截對(duì)目標(biāo)對(duì)象的訪問(wèn)，但用了這么久的vue3，你真的懂Proxy嗎，本文就來(lái)和大家深入聊聊Proxy吧2023-06-06
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
解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題
這篇文章主要介紹了解決vue?eslint開(kāi)發(fā)嚴(yán)格模式警告錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱來(lái)確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-08-08
vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個(gè)關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實(shí)現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了全局引入vant后使用Toast的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要給大家介紹了關(guān)于Vue如何使用Dayjs計(jì)算常用日期的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03