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 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
window.onload追加函数使用示例
Mar 03 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
jquery遍历json对象集合详解
May 18 Javascript
jQuery事件用法详解
Oct 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
使用JavaScript破解web
Sep 28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
vue实现简单计算商品价格
Sep 14 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
URL Rewrite的设置方法
2007/01/02 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
如何使用php实现评委评分器
2015/07/31 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
机修工工作职责
2014/02/21 职场文书
公司聘任书模板
2014/03/29 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
大气污染防治方案
2014/05/19 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
兼职安全员岗位职责
2015/02/15 职场文书
新员工试用期自我评价
2015/03/10 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL