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 相关文章推荐
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
php foreach、while性能比较
2009/10/15 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
提高网站信任度的技巧
2008/10/17 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
python之PyMongo使用总结
2017/05/26 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
C++程序员求职信
2014/05/07 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
药店采购员岗位职责
2014/09/30 职场文书
个人典型事迹材料
2014/12/30 职场文书
党支部季度考核意见
2015/06/02 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis