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>