vue中动态添加class类名的方法


Posted in Javascript onSeptember 05, 2018

vue 动态添加class类名,灵活得让你发狂,下面示例几个

<template>
  <div>
    <h2>动态添加类名</h2>


    <!-- 第一种方式:对象的形式 -->
    <!-- 第一个参数 类名, 第二个参数:boolean值 -->
    <!-- 对象的形式: 用花括号包裹起来,类名用引号, -->
    <!-- 优点: 以对象的形式可以写多个,用逗号分开 -->
    <p :class="{'p1' : true}">对象的形式(文字的颜色)</p>
    <p :class="{'p1' : false, 'p': true}">对象的形式(文字的颜色)</p>


    <!-- 第二种方式:三元表达式 注意点:放在数组中,类名要用引号-->
    <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>


    <!-- 第三种方式: 数组的形式 -->
    <p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>

    <!-- 数组中用对象 -->
    <p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>


 <!--补充: class中还可以传方法,在方法中返回类名-->
 <p :class="setClass">通过方法设置class类名</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isTrue: 'p1',
        isFalse: 'p'
      };
    },

 method: {
 setclass () {
    return 'p1';
   }
 }
  }
</script>
<style scoped>
  .p1 {
    color: red;
    font-size: 30px;
  }
  .p {
    color: blue
  }
</style>

以上这篇vue中动态添加class类名的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 #Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 #Javascript
vue 监听屏幕高度的实例
Sep 05 #Javascript
Vue-Router的使用方法
Sep 05 #Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 #Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 #Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 #Javascript
You might like
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
php实现session共享的实例方法
2019/09/19 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Angular17之Angular自定义指令详解
2018/01/21 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
小学教师的个人自我鉴定
2013/10/26 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
保健品市场营销方案
2014/03/31 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang