脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.js绑定class和style

vue.js绑定class和style样式（6）

 更新时间：2016年12月09日 09:00:25   作者：wenjuanzhao  
这篇文章我们将一起学习vue.js实现绑定class和style样式，感兴趣的小伙伴们可以参考一下

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

通过 v-bind:class 或者 :class 来为style或者class来绑定

绑定class

<div class="test">
  <div :class="{active:isActive,cc:isCc}"></div>
 </div>

js代码

 var myVue = new Vue({
    el: ".test",
    data: {
      isActive:true,
      isCc:false
    },
  });

或者下面的代码也可以实现

 <div class="test">
    <div :class=classObject></div>
  </div>

js代码

var myVue = new Vue({
    el: ".test",
    data: {
      classObject:{
        active:true
      }
    },
  });

通过过数组将class绑定

  <div class="test">
    <div :class="[activeClass,error]">dsdsd</div>
  </div>

js代码

 var myVue = new Vue({
    el: ".test",
    data: {
      activeClass:"active",
      error:"ddd"
    },
  });

绑定style属性

<div class="test">
    <div :style=styleObject>dsdsd</div>
  </div>

js代码

  var myVue = new Vue({
    el: ".test",
    data: {
      styleObject:{
       color: "red",
        fontSize: "30px"
      }
    },
  });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    本篇文章主要介绍了vuejs使用FormData实现ajax上传图片文件，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • Vue使用Swiper的案例详解

    Vue使用Swiper的案例详解

    这篇文章主要介绍了Vue使用Swiper的案例详解，主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下
    2022-06-06
  • VsCode里的Vue模板的实现

    VsCode里的Vue模板的实现

    这篇文章主要介绍了VsCode里的Vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • uniapp+Vue3 组件之间的传值方法示例详解

    uniapp+Vue3 组件之间的传值方法示例详解

    文章主要介绍了父子传值、兄弟传值和provide/inject三种在Vue中进行组件间通信的方法,感兴趣的朋友跟随小编一起看看吧
    2025-03-03
  • vue 通过绑定事件获取当前行的id操作

    vue 通过绑定事件获取当前行的id操作

    这篇文章主要介绍了vue 通过绑定事件获取当前行的id操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • element中el-autocomplete的常见用法示例

    element中el-autocomplete的常见用法示例

    这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • Vue项目配置@别名全过程

    Vue项目配置@别名全过程

    这篇文章主要介绍了Vue项目配置@别名全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0，感兴趣的朋友一起看看吧
    2022-06-06
  • Vue实现docx、pdf格式文件在线预览功能

    Vue实现docx、pdf格式文件在线预览功能

    在业务中，如果遇到文档管理类的功能，会出现需要在线预览的业务需求，本文主要是通过第三方库来实现文档预览功能，并将其封装成preview组件,感兴趣的可以了解一下
    2022-09-09
  • vue-router安装和使用详解

    vue-router安装和使用详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,分步骤介绍了安装和使用vue-router的方法,感兴趣的朋友跟随小编一起看看吧
    2023-08-08

最新评论