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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
jQuery Study Notes学习笔记 (二)
Aug 04 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php入门小知识
2008/03/24 PHP
PHP 命名空间实例说明
2011/01/27 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
python实现给字典添加条目的方法
2014/09/25 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
小区门卫工作职责
2013/12/14 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
上班迟到检讨书
2014/09/15 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
周一给客户的问候语
2015/11/10 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
i7 6700处理器相当于i5几代
2022/04/19 数码科技