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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
jquery中动态效果小结
Dec 16 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php数组键值用法实例分析
2015/02/27 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python实现录音小程序
2020/10/26 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
党委班子剖析材料
2014/08/21 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python