v-bind属性渲染指令

• v-bind 指令被用来响应地更新 HTML 属性，主要是绑定属性。

• v-bind:href    可以缩写为    :href;

1.1.1 绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。

• 注意：v-bind:class指令可以与普通的class特性共存v-bind 中支持绑定一个对象 ，如果绑定的是一个对象则键为对应的类名，值为对应data中的数据

.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}

 

 <div id="app">
        <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
            <li>vuejs</li>
            <li>nodejs</li>
            <li>webpack</li>
        </ul>
    </div>

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   isColor:true,
                   isSize:true,
                }

            },
            methods:{
               

            }
        })
    </script>

1.1.2 样式渲染-绑定class

v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。

<style>
        .box{
            border: 2px solid blue;
        }
        .textColor{
            color: brown;
            background-color: orange;
        }
        .textSize{
            font-size: 30px;
        }
    </style>

 

 <div id="app">
        <ul class="box" v-bind:class="[classA,classB]">
            <li>vuejs</li>
            <li>nodejs</li>
            <li>webpack</li>
        </ul>
    </div>

 <script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                  classA:'textColor',
                  classB:'textSize'
                }

            },
            methods:{
               

            }
        })
    </script>

预览：

1.1.3 绑定对象和绑定数组的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

• 绑定数组的时候数组里面存的是data 中的数据

1.1.4 样式渲染-绑定style

在项目中，有的时候，我们需要绑定内置（内联、行内）样式，这个时候我们可以使用v-bind:style 进行数据渲染。

 <div id="app">
        <!-- 1.以对象的形式进行直接渲染 -->
        <div v-bind:style=" styleObject">内联样式动态渲染</div>
        <!-- 2.在标签渲染样式的地方，直接写对象,动态调用数据中心的变量（属性） -->
        <div v-bind:style="{color:colorA,'font-size':font50,'background-color':bgcolorA}">内联样式动态渲染</div>
        <!-- 3.以数组的形式进行直接渲染，其中数组中每个单元上的内容是一个对象 -->
        <div v-bind:style="[styleObject1,styleObject2]">内联样式动态渲染</div>
    </div>

 

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   styleObject:{
                        color:'green',
                        fontSize:'30px',
                        backgroundColor:'blue',
                        marginBottom:'30px'
               
                   },
                   colorA:'orange',
                   font50:'50px',
                   bgcolorA:'lightgreen',
                   styleObject1:{
                    color:'red'
                   },
                   styleObject2:{
                    fontSize:'50px'
                   }
                }

            },
            methods:{
               

            }
        })
    </script>

预览：