v-bind基本用法

一、v-bind:class用法


1.布尔值判断是否采用

我是字
 data:{
      isColor:true,
      isSize:true
  }

2.对象属性-布尔值判断是否采用

 我是字
data:{
    classObject:{
    'textColor': true,
    'textSize': true
    }

4.isA?classA:''三元表达式

我是字
    data:{
        classA: 'textColor',
        classB: 'textSize',
        isA: false
    }

3.数组形式

  我是字
    data:{
        classA: 'textColor',
        classB: 'textSize'
    }

二、v-bind:style

1

我是字
data:{
            activeColor: 'red',
            size: '30px',
            shadow: '5px 2px 6px #000'
        }

2.

我是字

 data:{
        styleObject:{
        color: 'red',
        fontSize: '30px',
        textShadow: '5px 2px 6px #000'
        }

3.

 我是字

 data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        }
    }

4.

  我是字
data:{
        styleA:{
            fontSize: '30px',
            color: 'red'
        },
        styleB:{
            textShadow: '5px 2px 6px #000'
        },
        isA: false
    }

三、v-bind:src


 ![](url)
 data:{
            url: "../img/pg.png"
        }

四、v-bind:title

ps:这个显示方式自己试试

我是字

你可能感兴趣的:(v-bind基本用法)