本文實(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í)候開始使用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ì)有所幫助。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
