专栏首页柠檬先生VUE 入门基础(5)

VUE 入门基础(5)

五,Class 与 Style 绑定

绑定HTML class

  对象语法

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

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

    上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真 。

      <div class=”static” v-bind:class=”{active:isActive,’text-danger’:hasError:false}”></div>

  渲染为:

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

      也可以直接绑定数据里的一个对象

    <div v-bind:class=“classOject”></div>
    data: {
      classObject: {
      active: true,
      ‘text-danger’:false
      }
    }

  绑定返回对象的计算属性

    <div v-bind:class=”classObject”></div>
      data: {
        isActive:true,
        Error:null
      },
     computed: {
        classObject: function() {
        classObject:function(){
      return {
          active: this.isActive && !This.error,
          ‘text-danger’: this.error && this.error.type === ‘fatal’
        }
      }
    }
  }

  数组语法

    可以把一个数组传给 v-bind:class ,以应用一个 class 列表:

      <div v-bind:class=”[activeClass,errorClass]”>
        data: {
          activeClass:’active’,
          errorClass:t’text-danger’
        }

    渲染为:

      <div class=”actvie text-danger”></div>

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

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

    用在组建上

      当你在一个定制的组件上用到 class 属性的时候,这些类将被添加到根元素上面,这个元素上已经存在的类不会被覆盖。

     如果你声明了这个组件

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

    然后在使用它的时候添加一些 class:

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

    HTML 最终将被渲染成为:

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

    同样的适用于绑定 HTML class :

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

    当 isActive 为 true 的时候,HTML 将被渲染成为:

      <p class="foo bar active"></p>

    绑定内联样式

    v-bind:style 的对象语法十分直观 非常像css 其实它是一个javaScript对象css属性名可以用驼峰或短横分割命名

      <div v-bind:style=”{color:activeColor,fontSize:fontSize + ‘px’}”></div>
        data: {
            activeColor:’red’,
            fontSize:30
        }

    直接绑定到一个样式对象通常更好,让模板更清晰:

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

  数组语法

    当v-bind:style 的数组语法可以将多个样式对象应用到一个元素上

      <div v-bind:style=“[baseStyle,overridingStyles]”>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery 操作DOM元素(1)

    .clone()   创建一个匹配的元素集合的深度拷贝。   .clone([withDataAndEvents])     ...

    用户1197315
  • VUE 入门基础(2)

    二,起步 引用方式可以使用  vue-cli     <script src="https://unpkg.com/vue/dist/vue.js"></scr...

    用户1197315
  • VUE 入门基础(4)

    四,计算属性   基础例子     <div id=‘example’>       <p>0riginal message: “{{message}}”</p...

    用户1197315
  • Vue.js-Class与Style绑定 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • Vue.js动态绑定class,实现各色花式需求

    在上面的语法中,active是class的名字,isActive是一个控制class动态展示的boolean值。当然以上是对象控制class最简单的用法。

    我的小熊不见了丶
  • bootstrap 模态弹出框 常用**

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • tf.estimator

    于小勇
  • Java .class文件是什么?

    java class 文件是对Java程序二进制文件格式的精确定义。每一个Java class文件都对一个Java类或者Java接口做出了全面描述。一个cla...

    MickyInvQ
  • Jmockdata随机模拟 Java 数据插件

         Jmockdta是一款实现模拟JAVA类型或对象的实例化并随机初始化对象的数据的工具框架。

    wuweixiang
  • bootstrap switch控件

    需要使用Bootstrap switch,实现通过、拒绝功能并且在开关至拒绝时,显示textarea框输入原因。

    用户5760343

扫码关注云+社区

领取腾讯云代金券