標題vue.js(5)學習值插入（資料繫結）

阿新 • • 發佈：2021-04-26

標題vue.js(5)學習值插入（資料繫結）

文章目錄

標題vue.js(5)學習值插入（資料繫結）

1、文字繫結（值插入）

程式碼如下：

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    < 
meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        < 
p>修改都資料: {{ msg }}</p>
        <p>修改都資料: <span v-once>資料: {{ msg }}</span></p>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            msg: '值1'
        }
    })
    //修改，但是這次修改，v-once 這個就不會變化了。 

    test1.msg = "變化2"
</script>

效果：

名稱	介紹
文字：普通插值	資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號)
文字：一次性地插值	通過使用 v-once 指令，執行一次性地插值，當資料改變時，插值處的內容不會更新。

2、原始 HTML

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <p>展示資料: {{ msg }}</p>
        <p>展示資料: <span v-html="msg"></span></p>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            msg: '<span> 我是帶 “ html標記 ” 的文字 </span>'
        }
    })

</script>

效果：

名稱	介紹
原始 HTML：普通插值	使用 v-html 指令

（PS : 站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對使用者提供的內容使用插值。）

3、Attribute

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <div v-bind:id="myId"></div>
        <button v-bind:disabled="button1disabled">按鈕1</button>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            button1disabled: "disabled",
            myId: 1
        }
    })
</script>

效果：

在這裡插入圖片描述
Mustache 語法 ( 用大括號 “{{msg}}” 這種語法 ) 不能作用在 HTML 標記內，遇到這種情況應該使用 v-bind

名稱	介紹
Attribute：插入值	使用 v-bind

（PS : 如果 isButtonDisabled 的值是 null、undefined 或 false，則 disabled attribute 甚至不會被包含在渲染出來的元素中。）

4、使用 JavaScript 表示式

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <div>
            初始：{{num}}
        </div>
        <div>
            表示式變化：{{num+1}}
        </div>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1',
        data: {
            button1disabled: "disabled",
            myId: 1,
            num: 1
        }
    })
</script>