Vue框架——属性绑定和样式绑定

属性绑定

• 使用v-bind指令

  <div>
      <a v-bind:href="url">百度a>
  div>
  

• v-bind缩写形式

  <div>
      <a :href="url">百度a>
  div>
  

样式绑定

class绑定

class绑定对象用法

<div v-bind:class="{style1: active, style2: active1}">
    测试样式
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        active: true,
        active1: true
    }
});

style1和style2属性为class名，active为属性的值，可以取true or false，当active的值

为true时，对应class为激活状态

class绑定数组用法

<div v-bind:class="[s1, s2]">
    测试样式
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        s1: 'style1',
        s2: 'style2'
    }
});

s1和s2是data里的属性，它们可以被赋值为某个class

对象绑定和数组绑定结合使用

<div v-bind:class="[s1, s2, {test: isTest}]">
    测试样式
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        s1: 'style1',
        s2: 'style2',
        isTest: true
    }
});

class绑定值简化操作

<div v-bind:class="arrClasses">
    测试样式
div>
<div v-bind:class="objClasses">
    测试样式
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        arrClasses: ['style1', 'style2'],
        objClasses: {
     
            style1: true,
            style2: true
        }
    }
});

当标签有默认的class时如何保留

<div class="test" v-bind:class="objClasses">
    测试样式
div>

style绑定

style绑定对象用法

<div id="app">
    
    <div v-bind:style="{
        width: widthStyle, height: heightStyle, border: borderStyle}">div>
    
    <div v-bind:style="objStyle">div>
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        widthStyle: '100px',
        heightStyle: '100px',
        borderStyle: '1px solid red',
        objStyle: {
     
            width: '100px',
            height: '100px',
            border: '1px solid red'
        }
    }
});

style绑定数组用法

<div id="app">
    
    <div v-bind:style="[baseStyle, overrideStyle]">div>
div>

var vm = new Vue({
     
    el: '#app',
    data: {
     
        baseStyle: {
     
            width: '100px',
            height: '100px',
            border: '1px solid red'
        },
        overrideStyle: {
     
            border: '1px solid red',
            backgroundColor: 'skyblue'
        }
    }
});

当数组里有多个对象时，不同对象里相同的属性会被覆盖，不存在的属性则添加