vue.js实现的绑定class操作示例


Posted in Javascript onJuly 06, 2018

本文实例讲述了vue.js实现的绑定class操作。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app1">
  <!--# 给v-bind设置一个对象,可以动态地切换class #-->
  <div :class="{'active':isActive}">app1</div>
</div>
<div id="app2">
  <!--# 给v-bind设置一个对象,可以动态地切换class #-->
  <!--# 对象中也可以传入多个属性,来动态切换class。另外,:class可以与普通class共存 #-->
  <div class="static" :class="{'active':isActive,'error':isError}">app2</div>
</div>
<div id="app3">
  <!--# 给v-bind设置一个对象,可以动态地切换class #-->
  <!--# 当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性,这是一种很友好和常见的用法,一般当条件多于两个时,都可以使用data或computer #-->
  <div :class="classes">app3</div>
</div>
</body>
</html>
<script>
  //例子一
  var app1 = new Vue({
    el:'#app1',
    data:{
      //类名isActive,当其为true时,div会拥有类名active,为false时则没有
      isActive:true
    }
  });
  //例子二
  var app2 = new Vue({
    el:'#app2',
    data:{
      //类名isActive,当其为true时,div会拥有类名active,为false时则没有
      isActive:true,
      //类名isError,当其为true时,div会拥有类名error,为false时则没有
      isError:true
    }
  });
  //例子三
  var app3 = new Vue({
    el:'#app3',
    data:{
      isActive:true,
      isError:false
    },
    computed:{
      classes:function () {
        return {
          active:this.isActive && !this.isError
        }
        //除了计算属性,你也可以直接绑定一个Object类型的数据,或者使用类似计算机属性的methods
      }
    }
  })
</script>

使用本站HTML/CSS/JS在线运行测试工具:http://tools.3water.com/code/HtmlJsRun,可得到如下测试运行效果:

vue.js实现的绑定class操作示例

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
ionic实现底部分享功能
May 11 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
You might like
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
JS模板实现方法
2013/04/03 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python自动连接ssh的方法
2015/03/07 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python的log日志功能及设置方法
2019/07/11 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
高考考python编程是真的吗
2020/07/20 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
办理信用卡工作证明
2014/01/11 职场文书
预防传染病方案
2014/06/14 职场文书
秋季运动会加油词
2015/07/18 职场文书