vue.js實現(xiàn)插入數(shù)值與表達式的方法分析

發(fā)布時間：2020-10-22 09:21:15 來源：腳本之家閱讀：300 作者：-老K- 欄目：web開發(fā)

本文實例講述了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版本

被插入的內(nèi)容都會被當(dāng)做 HTML —— 數(shù)據(jù)綁定會被忽略。注意，你不能使用 v-html 來復(fù)合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔(dān)任 UI 重用與復(fù)合的基本單元。此外不建議將用戶輸入的值直接作為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程序設(shè)計有所幫助。

向AI問一下細節(jié)

vue.js實現(xiàn)插入數(shù)值與表達式的方法分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽