Vue基礎系列（三）——Vue模板中的數據綁定語法

時間 2020-05-22

標籤 vue 基礎系列模板數據綁定語法简体版

原文原文鏈接

寫在前面的話：javascript

文章是我的學習過程當中的總結，爲方便之後回頭在學習。html

文章中會參考官方文檔和其餘的一些文章，示例均爲親自編寫和實踐，如有寫的不對的地方歡迎你們和我一塊兒交流。vue

VUE基礎系列目錄

《VUE基礎系列（一）——VUE入坑第一篇》java

《VUE基礎系列（二）——VUE中的methods屬性》npm

《VUE基礎系列（三）——VUE模板中的數據綁定語法》函數

《VUE基礎系列（四）——VUE中的指令（上）》學習

《VUE基礎系列（五）——VUE中的指令（中）》spa

一.前言

前面《VUE基礎系列（一）——VUE入坑第一篇》中咱們講過使用vue雙花括號插值法將data中的數據綁定到模板中（這個實際上能夠叫作文本方式的數據綁定）。這篇文章中咱們將總結一下vue中其餘形式的數據綁定語法。在這篇總結中會有一些vue指令的知識點，能夠結合下一篇文章《VUE基礎系列（四）——VUE中的指令（上）》一塊兒看。.net

二.文本

　　文本的數據綁定方式前面已經介紹過，這裏直接寫一個示例作說明。3d

#示例代碼

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue模板中的數據綁定語法</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <h1>{{msg}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data:{ msg:'我是一段包含html片斷的字符<span>hello</span>' } }); </script>
</body>
</html>

#界面效果

三.原生html

　　上面的文本數據綁定，當文本中包含html片斷時，html片斷已字符串的形式原封不動的展現到了模板中。不會將文本中的html片斷解析出來。而vue的v-html指令，就能夠將html片斷進行解析。

#基本語法

<tag v-html='data中的屬性'></tag>

#示例

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue模板中的數據綁定語法</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <h1 v-html='msg'></h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data:{ msg:'我是一段包含html片斷的字符<span>hello</span>', } }); </script>
</body>
</html>

#界面效果

　　能夠看到模板中<h1 v-html='msg'></h1> 這種寫法，vue會將msg中的html字符解析成DOM節點，而且將msg解析後完整的內容插入到h1元素中。

備註：

1.當咱們改變msg的值後，v-html綁定的值在模板中也會同步更新。

2.能夠在構造函數外部加入下面的js代碼去驗證，兩秒後頁面上本來的內容會變成"我是新的msg"。

setTimeout(function(){ vm.$data.msg = '我是新的msg'; },2000);

四.將數據綁定到元素的屬性上

將數據綁定到元素的屬性上也是須要結合vue的v-bind指令才能實現。

#基本語法

<tag v-bind:屬性名='data中的屬性'></tag>

#示例

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue模板中的數據綁定語法</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- v-bind -->
    <div id="box">
        <span v-bind:id='desc'>我是一段文字</span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el:'#box', data: { desc:'text' } }) </script>
</body>
</html>

#界面效果

　　能夠看到，data中desc的值已經成功的設置爲<span>元素的id屬性上。

　　備註：

　　1.當咱們改變desc的值後，v-bind綁定的值在模板中也會同步更新。

　　2.能夠在構造函數外部加入下面的js代碼去驗證，兩秒後查看span元素的id會變成new-text。

setTimeout(function(){ vm.$data.desc = 'new-text'; },2000);

五.總結

　　1.使用雙花括號能夠將數據以文本的形式綁定到模板中。數據更新模板同步更新

　　2.使用v-html指令綁定數據時，能夠將數據中的html片斷解析爲DOM節點。一樣數據更新，模板同步更新。

　　3.使用v-bind能夠將數據綁到元素的屬性上。一樣數據更新，模板同步更新。

原文出處：https://www.cnblogs.com/HouJiao/p/11820446.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。