Mr_ven

6、class和style绑定-vue渐进式javascript框架基础
操作元素的class列表和样式可以用v-bind处理,只需要通过表达式计算出字符串,这样的方式较容易出错,vue....
扫描右侧二维码阅读全文
01
2019/05

6、class和style绑定-vue渐进式javascript框架基础

操作元素的class列表和样式可以用v-bind处理,只需要通过表达式计算出字符串,这样的方式较容易出错,vue.js专门做了增强

绑定html Class

对象语法

可以传给 v-bind:class 一个对象,动态切换class

<div v-bind:class="{ active: isActive }"></div>

表示class存在与否取决于数据属性isActive值的真假(trye/false)

可以在对象中传入多个属性来动态切换多个class,也可以和原本的class共存,

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

如下data:

data: {
  isActive: true,
  hasError: false
}

结果渲染为:

<div class="static active"></div>

当isActive或hasError值发生变化,对应class列表也会发生变化,如将hasError值改为true,class列表将变成"static active text-danger"

绑定的数据对象也不一定内联定义在模板里

<div v-bind:class="classObject"></div>
data:{
    classObject:{
        active:true,
        text-danger:false
    }
}

我们也可以在这里绑定一个返回对象的计算属性(对象的具体值通过计算取的)

数组语法

我们可以把一个数组传给v-bind:class

<div v-bind:class="[activeClass,errorClass]"></div>
data:{
    activeClass:"active",
    errorClass:"error"
}

渲染后:

<div class="active error"></div>

若需要根据条件切换列表中class也可以用三元表达式

<div v-bind:class="[isActive?activeClass:'',error]"></div>

当isActive值为true时才添加activeClass,这样的写法比较繁琐,在这里也可以使用对象语法

<div v-bind:class="[{active:isActive},error]"></div>

用在组件上

在一个自定义组件上使用class属性时,这些类会被添加到该组件的根目录,已存在的类不会被覆盖

例如声明以下组件:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

在使用时添加一些class

<my-component class="baz boo"></my-component>

渲染结果:

<p class="foo bar baz boo">Hi</p>

对于带数据绑定的参数也适用

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观,看着和css非常像,但其实是javascript对象,css属性名可以采用驼峰命名,也可以使用短横线分割(需要引号)命名

<div v-binD:style="color:activeColor,fontSize:fontSize+'px'">..</div>
data:{
    activeColor:"red",
    fontSize:12
}

也可以直接绑定到一个对象上

<div v-bind:style="styleObject"></div>
data:{
    styleObject:{
        color:"red",
        fontSize:"18px"
    }
}

数组语法

可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseSrtle,activeStyle]"></div>

自动加前缀

当v-bind:style使用需要添加浏览器引擎前缀的css属性时,Vue会自动侦测并添加相应前缀

多重值

从2.3.0后的版本可以为style绑定的属性提供一个包含多个属性值的数组,常用于多个带前缀的值

例如:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

只会渲染出最后一个被浏览器支持的值,本例中如果浏览器不支持不带前缀的flexbox,那么只会渲染display:flex

最后修改:2019 年 05 月 01 日 12 : 52 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论