Vue基礎語法02

Vue基礎語法02

1. 屬性綁定 v-bind：（可簡寫爲“：”）
   v-bind 指令被用來響應地更新 HTML 屬性
   v-bind:href 可以縮寫爲 :href
   v-bind 和 v-on的區別：
   v-bind 綁定屬性
   v-on 綁定事件

<div class="app">
        <input type="text" v-bind:value="msg">
    </div>

    <script>
        var vm=new Vue({

            el:'.app',
            data:{
                msg:123,
            }
        });
    </script>

2. 綁定類名v-bind：class
   通過v-bind:class = { 鍵： 值 }
   鍵 代表一個類名 如果這個值 爲true 表示 顯示這個類名
   如果這個值 爲false 表示 不顯示這個類名

<style>
        .in {
            background-color: pink;
        }
    </style>
    <div class="app">
        <input type="text" v-bind:value="msg" :class={in:inFlag}>
    </div>

    <script>
        var vm=new Vue({

            el:'.app',
            data:{
                msg:123,
                inFlag:true,
            }
        });
    </script>

<script>
        var vm=new Vue({

            el:'.app',
            data:{
                msg:123,
                inFlag:false,
            }
        });
    </script>

通過v-bind:class =[ 值1，值2 ]
值1、值2 對應 data 中的 數據

 .in {
            background-color: pink;
        }
        .border {
            border: 5px solid purple;
        }
    </style>
    <div class="app">
        <input type="text" v-bind:value="msg" :class=[inClass,borderClass]>
    </div>

    <script>
        var vm=new Vue({

            el:'.app',
            data:{
                msg:123,
                inFlag:false,
                inClass:'in',
                borderClass:'border'
            }
        });
    </script>

對象綁定和數組綁定可以混用嗎？
數組中可以存儲任何數據類型
對象的值中也可以存儲任何數據類型
綁定數組和綁定對象有什麼區別
綁定對象的時候對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
綁定數組的時候數組裏面存的值 是data 中的數據

類名是可以疊加的，之前存在class 可以通過v-bind:class繼續控制其他類名，在頁面中是以多類名方式展現

.in {
            background-color: pink;
        }
        .border {
            border: 5px solid purple;
        }
        .h {
            height: 50px;
            width: 100px;
        }
    </style>
    <div class="app">
        <input type="text" v-bind:value="msg" :class=[inClass,borderClass] class="h">
    </div>

    <script>
        var vm=new Vue({

            el:'.app',
            data:{
                msg:123,
                inFlag:false,
                inClass:'in',
                borderClass:'border'
            }
        });
    </script>

樣式綁定之style綁定用法

綁定style 可以使用數組和 對象
v-bind:style = [值1， 值2 ]
數組中的值1 和值2 中存儲的是一個對象 這個對象裏面存儲的 css屬性和 屬性值

 <div class="app">
        <input type="text" :style=[style1,style2]>
    </div>

    <script>

        var vm=new Vue({
            el:".app",
            data:{
                style1:{
                    backgroundColor:'pink',
                },
                style2:{
                    border:'5px solid purple',
                }
            }
        });
    </script>

v-bind:style = { 鍵： 值 }
鍵 代表 CSS的屬性 值 中 存貯的是 CSS 屬性值

<div class="app">
        <input type="text" :style={backgroundColor:red,border:border}>
    </div>

    <script>

        var vm=new Vue({
            el:".app",
            data:{
                red:'red',
                border:'5px solid pink'
            }
        });
    </script>