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 不只是脚本
May 30 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
js实现简单扫雷
2020/11/27 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python基本语法经典教程
2016/03/11 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python write无法写入文件的解决方法
2019/01/23 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
在python中画正态分布图像的实例
2019/07/08 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
质检部部长职责
2013/12/16 职场文书
护理职业生涯规划书
2014/01/24 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书