Vue v-bind 动态绑定属性、class、style

data数据

 data() {
    return {
   active:true,
   error:true,
   imageUrl:require('../../src/assets/1.jpeg') ,//如果图片路径正确但是不显示 一定要加上require
   herfUrl:'http://www.baidu.com'
    }

一、动态绑定属性
1、 img标签的src属性 imageUrl 是图片的动态地址

语法糖写法 可简写为下面的代码

2、a标签的 href属性 herfUrl 是动态链接

百度一下，你就知道

语法糖写法 可简写为下面的代码

 百度一下，你就知道

二、Class 与 Style 动态绑定

1、对象语法 ：class = ‘{属性名称：属性值}’ （比较常用）

1.1、单个class

//activeStyle :class的名称  
//active：是一个Bool类型的值 如果为true 则绑定 activeStyle 否则不绑定

  

    动态绑定class
  

1.2、多个class

对象中可以传入更多字段来动态切换多个 class。

//activeStyle和errorStyle 可以叠加
//如果activeStyle和errorStyle 中有共同的 属性则就近原则 （谁在后显示谁的）
  

    动态绑定class
  

如果active为true 和 error 为false
结果渲染为：

  

    动态绑定class
  

如果active为false 和 error 为true
结果渲染为：

  

    动态绑定class
  

如果active 和 error 都为true
结果渲染为：

  

    动态绑定class
  

1.3、可以与普通的 class attribute 共存（也是就近原则）

 

    动态绑定class
  

2、数组语法 ：[class1、class2、class3]

bind:class='[activeStyle,errorStyle]'>
    动态绑定class
  

结果渲染为：

  

    动态绑定class
  

如果你也想根据条件切换列表中的 class，可以用三元表达式：

  

    动态绑定class
  

练习、有语文、数学、外语三门课程 选中的颜色为红色 未选中的颜色为黑色