最近一直在做vue项目 从网上搜索到的资料不太多。关于:class的使用 结合自己的实现 整理如下。接下来一篇写:style 。其实从:class 这里可以想到:style的使用 也是类似的

一 class

1 自定义class  通过vue computed 计算属性 实现  我的class 是名称+时间戳,是独一份的,可以作为id角色使用。

html:

<div :class="_module"></div>

js:

data(){
return {
arr:{
m_class:"",
       hasClass:false
}
}
},
computed:{
_module:{
get: function () {
if(this.arr.hasClass){
return this.arr.m_class
}else{
return this.arr.m_class="module_"+(new Date().getTime())
}
}
}
}

2 以三元表达式来表示class

如果存在titleSrc 就添加bgImgSet,如果不存在就没有这个class

html:
<div :class="ind.titleSrc?'bgImgSet':''"></div>

data(){
return {
ind:{
titleSrc:""
}
}
}

3 如果存在两个动态class  可以如下这样写 注意标签上不能写两个:class

<div class="allCommon "  @contextmenu.prevent="clickSet(_module)" :class="[_module,{'takePlace':!arr.con.htmlData}]">
</div>

用[]数组的形式

这里面_module 是我用1方法生成的,需要给我项目每个模块的div添加上的class;takePlace 是占位的class 只有特定的模块能添加,关于两个动态class如何添加,最后想出 以数组的方式 可以实现。 代码如上

关于vue 里:class 的几种使用方式的更多相关文章

  1. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  2. js里常见的三种请求方式$.ajax、$.post、$.get分析

    $.post和$.get是$.ajax的一种特殊情况: $.post和$.get请求都是异步请求,回调函数里写return来返回值是无意义的, 回调函数里对外部变量进行赋值也是无意义的. 即使是$.a ...

  3. Vue中常用的三种传值方式

    父传子 父子组件的关系可以总结为prop向下传递,事件向上传递.父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息. 父组件: <template> <div> ...

  4. Java里数组的三种初始化方式

    静态初始化 除了用new关键字来产生数组以外,还可以直接在定义数组的同时就为数组元素分配空间并赋值. // 静态初始化 int[] iStaticArr = { 5, 2, 0 }; LOLHero[ ...

  5. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  6. 了解vue里的Runtime Only和Runtime+Compiler

    转自:了解vue里的Runtime Only和Runtime+Compiler 扩展文章:Vue 2.0如何仅使用Runtime-only Build构建项目? 可以看到有两种版本: Runtime ...

  7. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  8. vue里的数据

    背景: 一个项目完工在即,鉴于此,前端使用了vue,写下此栏,以供日后翻阅, 会涉及到我所运用到的vue相关知识,需要一定的js基础. 默认vue的single-file-components(单文件 ...

  9. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

随机推荐

  1. 常用类String的总结

    /* String:字符串,使用一对""引起来表示. 1.String声明为final的,不可被继承 2.String实现了Serializable接口:表示字符串是支持序列化的. ...

  2. MySQL概述及入门(四)

    MySql概述及入门(四) 什么是MySQL的锁? 数据库锁定机制,就是数据库为了保证数据的一致性,而使各种共享资源在被并发访问变得有序所设计的一种规则,简单说,就是不让别人动 总的来说,MySQL各 ...

  3. akka设计模式系列-消息模型(续)

    在之前的akka设计模式系列-消息模型中,我们介绍了akka的消息设计方案,但随着实践的深入,发现了一些问题,这里重新梳理一下设计方法,避免之前的错误.不当的观点给大家带来误解. 命令和事件 我们仍然 ...

  4. C语言再学习part1-宏观认识C语言

    天下莫柔弱于水,而攻坚强者莫之能胜,以其无以易之也.弱之胜强,柔之胜刚,天下莫不知行,莫能行. —老子 我近来每天都在坚持读书,所以我一直沉浸于古人的智慧中无法自拔.所以如果我这篇博文被你有幸看到,那 ...

  5. QPixmap和QImage

    1.QPixmap QPixmap的设计本来就是用来加速显示,用paint绘图时用QPixmap会比其他类的效果好很多.一般小图片用QPixmap. 2.QImage 依赖软件,直接像素访问,适合大图 ...

  6. Patter discovery VS clustering

    “pattern driven” (PD) is based on enumerating candidate patterns in a given solution space and picki ...

  7. (转)jvm具体gc算法介绍标记整理--标记清除算法

    转自:https://www.cnblogs.com/ityouknow/p/5614961.html GC算法 垃圾收集器 概述 垃圾收集 Garbage Collection 通常被称为“GC”, ...

  8. Python学习笔记一:变量、函数

    变量.函数是Python语言的最基本单元,下面是我作为初学者的当前理解,随着学习的深入今后会做刷新. 变量:表示操作对象是谁. 变量的方法:表示能做什么事情. 如何设计变量:先分析需要解决的问题,基于 ...

  9. JS基础-内置对象【字符串+Date+Math】

    JS内置对象[字符串] // charAt() 返回字符 // charCodeAt() 返回字符的unicode编码 var str="hello world"; console ...

  10. javascript当中onload用法

    7)onload onload就是等页面加载完后才执行. 例 3.7.1 <HEAD> <meta http-equiv="content-type" conte ...