vue根据值给予不同class的实例


Posted in Javascript onSeptember 29, 2018

如下所示:

<div class="chatBox-kuang" :class="addclass(skin)">
</div>
 
data(){
 return{
  skin:''
 }
}
onchooseSkin(attr){
 this.skin=attr
},

方法一

addclass(i){
 switch (i) {
  case 0:
   return 'skinA';
  case 1:
   return 'skinB';
  case 2:
   return 'skinC';
 }
}

方法二

addclass(i){
 var arr = ['skinA','skinB','skinC'];
 if(i==-1){
  return 'skinA'
 }else{
  return arr[i];
 }
}

以上这篇vue根据值给予不同class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 #Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 #Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 #Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 #Javascript
You might like
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php 操作调试的方法
2012/07/12 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python json转字典字符方法实例解析
2020/04/13 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
行政办公员自我评价分享
2013/12/14 职场文书
考试不及格检讨书
2014/01/09 职场文书
销售人员获奖感言
2014/02/05 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android