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 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

Jquery基本用法总结

选择器 $("#mydiv") 通过ID $("p#myp") 选择id=myp 的所有p元素(组合型) $(".mydiv") 通过 class="mydi...

20690
来自专栏HTML5学堂

JS设置标签的内容和样式

上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

73590
来自专栏十月梦想

Vue入门详解之绑定class和style样式

如果isActive为真这绑定这个activedclass,我们绑定了一个click事件,点击后改变这个isClick取值,我们在style中定义了这个.ac...

18820
来自专栏JavaEdge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

11830
来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

42990
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

28960
来自专栏HTML5学堂

一个setInterval的小问题

一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

36290
来自专栏Pythonista

前端学习之jQuery

[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

10510
来自专栏小狼的世界

CSS3 Transition介绍

CSS3提供了一种全新的方式来定义CSS属性改变时的过渡效果,通常在:hover、:focus的条件下触发。过去,为了实现这种平滑的过渡效果,我们需要借助于Fl...

11320
来自专栏编程微刊

jQuery文档对象模型DOM的实际应用

DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

11130

扫码关注云+社区

领取腾讯云代金券