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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue实现弹幕功能
Oct 25 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
写一个Vue loading 插件
Nov 09 Javascript
Javascript实现关闭广告效果
Jan 29 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
在字符串中把网址改成超级链接
2006/10/09 PHP
php mssql 时间格式问题
2009/01/13 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
Python中的字典遍历备忘
2015/01/17 Python
Python守护进程用法实例分析
2015/06/04 Python
5种Python单例模式的实现方式
2016/01/14 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python实现共轭梯度法
2019/07/03 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
决心书标准格式
2014/03/11 职场文书
个人租房协议书
2014/04/09 职场文书
超市开店计划书
2014/04/26 职场文书
个人安全承诺书
2014/05/22 职场文书
学生安全责任书模板
2014/07/25 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
党员个人自我评价
2015/03/03 职场文书
建国大业观后感800字
2015/06/01 职场文书
基石观后感
2015/06/12 职场文书
2016公司年会主持词
2015/07/01 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书