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 相关文章推荐
js动态移动滚动条至底部示例代码
Apr 24 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jQuery操作cookie
Aug 08 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
JavaScript正则表达式和级联效果
Sep 14 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
php格式化电话号码的方法
2015/04/24 PHP
判断用户是否在线的代码
2011/03/05 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
canvas红包照片实例分享
2017/02/28 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
python多线程扫描端口示例
2014/01/16 Python
python生成验证码图片代码分享
2016/01/28 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python获取中文字符串长度的方法
2018/11/14 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
Django中ORM的基本使用教程
2020/12/22 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
敬老月活动总结
2014/08/28 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
病房管理制度范本
2015/08/06 职场文书
学习委员竞选稿
2015/11/20 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js