一、动态绑定href和src

使用v-bind动态设置链接的 href 属性和图片的 src 属性，当数据变化时，就会重新渲

染。

代码：

执行结果

当我们改变url的值，a连接就指向了淘宝

二、动态绑定 class 的几种方式

v-bind通常用来绑定属性的，格式是v-bind：属性名 = "值"，简写:属性名 = "值"

变量语法：v-bind：class = "变量"，变量形式 ,这里的变量的值，通常是在css定义好的类名；

数组语法：v-bind：class= "[变量1，变量2]" ，数组形式，其实跟上面差不多，只不过可以同时绑定多个class名；

对象语法：v-bind:class = {classname1：boolean，classname2：boolean}，对象形式，这里的classname1（2）其实就是样式表中的类名，这里的boolean通常是一个变量，也可以是常量、计算属性等，这种方法也是绑定class最常用的方式。

1、普通绑定class

     
    
      var app2=new Vue({        el:'#abc',        data:{           className:'transRed',        }    })

2、class 对象语法

给 vbind:class 设置一个对象，可以动态地切换 class。

绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加

    
        
        
        Document        
    
             绑定class对象语法,对象的键是类名，值是布尔值.如果布尔值是true，代表该元素添加了对应的class，为false，则没有添加

**当 class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的

用法，一般当条件多于两个时，都可以使用 data 或 computed**

3、数组语法

当需要应用多个 class 时，可以使用数组语法，给：class 绑定一个数组，应用一个 class

列表：数组成员直接对应className--类名

    
    
              绑定class数组语法,数组中的成员直接对应类名
     
         
     
      我是数组绑定class

4、数组和class对象混用——————看演示

errorclass永远存在，active看情况存在

    绑定class：
    
    
             数组和对象混用，第一个成员是对象，第二个成员是数组成员
     
        
     
      数组

5、在组件上使用 : 暂时不考虑—挖坑

三、绑定内联样式

使用 vbind:style （即：style ）可以给元素绑定内联样式，方法与：class 类似，

也有对象语法和数组语法，看起来很像直接在元素上写 CSS:

注意 : css 属性名称使用驼峰命名（ came!Case ）或短横分隔命名（ kebabcase

），

对象语法


    
     数组
    
//注意要加px

数组语法，很不常见，较为常用的应当是计算属性

    
    
                 对象语法绑定内联样式：键代表style的属性值，值代表属性对应的值了。
     
            驼峰写法：vue中只要是大写字母，就会给你转换成-和小写。
     
        
     
      数组
     
    
    
    
    
                 style数组语法绑定内联样式
     
        
     
      数组

使用 :style 时， Vue .js 会自动给特殊的 css 属性名称增加前缀，比如 transform 。

无需再加前缀属性！！！

转载地址：http://kpqcx.baihongyu.com/

你可能感兴趣的文章