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下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
layer插件select选中默认值的方法
Aug 14 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许愿墙模块功能分析
2013/06/25 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
深入讲解Python编程中的字符串
2015/10/14 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
团代会宣传工作方案
2014/05/08 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技