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 firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
10个简化PHP开发的工具
2014/12/25 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
python实现发送邮件及附件功能
2021/03/02 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
个人简历自我评价
2014/02/02 职场文书
个人自荐书范文
2015/03/09 职场文书
2015年教师节活动总结
2015/03/20 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Python中的程序流程控制语句
2022/02/24 Python