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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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
Symfony页面的基本创建实例详解
2015/01/26 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
php搜索文件程序分享
2015/10/30 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
Python中的列表知识点汇总
2015/04/14 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python Django view 两种return的实现方式
2020/03/16 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
工厂实习感言
2014/01/14 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
小学推普周活动总结
2015/05/07 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
关于python中模块和重载的问题
2021/11/02 Python