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 相关文章推荐
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
php学习之function的用法
2012/07/14 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python作用域用法实例详解
2016/03/15 Python
python最长回文串算法
2018/06/04 Python
python使用Matplotlib画条形图
2020/03/25 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
计算机本科生自荐信
2013/10/15 职场文书
铁路安全事故反思
2014/04/26 职场文书
2014全年工作总结
2014/11/27 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫