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 相关文章推荐
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
基于JavaScript实现简单扫雷游戏
Jan 02 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中__get()和__set()的用法实例详解
2013/06/04 PHP
php中chdir()函数用法实例
2014/11/13 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PDO实现学生管理系统
2020/03/21 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
2017/03/02 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Python命名空间详解
2014/08/18 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python实现图书借阅系统
2019/02/20 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
用Python写一个for循环的例子
2016/07/19 面试题
护理专业个人求职简历的自我评价
2013/10/13 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS