Vue模板語法V-bind

時間 2019-11-09

標籤 vue 模板語法 bind 简体版

原文原文鏈接

1、插值javascript

1.文本css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>無標題文檔</title>
</head>

<body>
    <span id="app1">Message: {{ msg }}</span><br>
    <span id="app2" v-once>這個將不會改變: {{ msg }}</span>
</body>
</html>
<script type="text/javascript">
    // 數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值。
    // Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。例以下面在app1中設置了msg的屬性爲「Hello World!」，在下面從新設置了屬性值爲「123456」，在頁面中顯示爲123456。
    var app1 = new Vue({
        el: '#app1',
        data: {
            msg: 'Hello World!'
        }
    })
    app1.msg = '123456';


    // 經過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定。下面的App2也從新設置了msg的值，可是頁面中仍是顯示「你好!」，下面從新設置的屬性值無效。
    var app2 = new Vue({
        el: '#app2',
        data: {
            msg: '你好!'
        }
    })
    app2.msg = '我很好';
</script>

顯示結果以下：html

2.原始Htmlvue

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>無標題文檔</title>
</head>

<body>
    <div id="app1">
        <p>{{ html }}</p>
    </div>

    <div id="app2">
        <p v-html="html"></p>
    </div>
</body>
</html>
<script type="text/javascript">
    // 雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。
    var app1 = new Vue({
        el: "#app1",
        data: {
            html: "<b style='color:red'>v-html</b>"
        }
    })

    // 爲了輸出真正的 HTML，你須要使用 v-html 指令：
    var app2 = new Vue({
        el: "#app2",
        data: {
            html: "<b style='color:red'>v-html</b>"
        }
    });

</script>

顯示結果以下：java

3.特性npm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style type="text/css">
        .box box2{
            border:1px dashed #f0f;
        }
        .textColor{
            color:#f00;
            background-color:#eef;
        }
        .textSize{
            font-size:30px;
            font-weight:bold;
        }
    </style>
<title>無標題文檔</title>
</head>

<body>
<ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
    <li>我要吃飯</li>
    <li>我要睡覺</li>
    <li>我要工做</li>
</ul>

<ul class="box2" :class="[isA?classA:'', classB]">
    <li>我要吃飯</li>
    <li>我要睡覺</li>
    <li>我要工做</li>
</ul>
</body>
</html>
<script type="text/javascript">
    // 若是 isColor、isSize 的值是 null、undefined 或 false，則 textColor、textSize 特性不會被包含在渲染出來的 <button> 元素中。
    var vm= new Vue({
        el:'.box',
        data:{
            isColor:true,
            isSize:true
        }
    })


    var vm2= new Vue({
        el:'.box2',
        data:{
            classA:'textColor',
            classB:'textSize',
            isA:false
        }
    })

</script>

效果圖：app

相關標籤/搜索

每日一句

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