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 新浪背投广告实现代码
Jul 07 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
js基于canvas实现时钟组件
Feb 07 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
用python读写excel的方法
2014/11/18 Python
浅谈Python单向链表的实现
2015/12/24 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python实现点对点聊天程序
2018/07/28 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
详解python 爬取12306验证码
2019/05/10 Python
python统计文章中单词出现次数实例
2020/02/27 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
大学生村官典型材料
2014/01/12 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
Python正则表达式中flags参数的实例详解
2022/04/01 Python