Vue2.0点击切换类名改变样式的方法


Posted in Javascript onAugust 22, 2018

1、使用index

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>vue导航</title>
 <style media="screen">
 *{
 margin:0;
 padding: 0;
 }
 ul li{
 list-style: none;
 }
 .navul{
 margin:100px auto 20px;
 overflow: hidden;
 }
 .navul li{
 background-color: #5597b4;
 padding:18px 30px;
 float:left;
 color: #fff;
 font-size: 18px;
 cursor: pointer;
 }
 .active{
 background-color: #5597b4;
 }
 .home .home,.new .new,.contact .contact,.service .service{
 background-color: skyblue;
 }
 .checked{
  background: #eff4f7;
 }
 </style>
</head>
<body>
 <div id="nav">
  <ul>
   <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">
    <i></i>
    <span class="">{{relation.text}}</span>
   </li>
  </ul>
 </div>
 
 <script src="js/vue.js" charset="utf-8"></script>
 <script type="text/javascript">
 var nav = new Vue({
  el:'#nav',
  data:{
  relations: [
   {text:'项目',id:'program'},
   {text:'人员',id:'person'},
   {text:'机构',id:'organization'},
   {text:'技术',id:'tech'},
   {text:'地区',id:'location'},
   {text:'国家',id:'country'}
  ],
  nowIndex:0
  // willShow:false
  },
  methods:{
  relationClick:function(index){
   
   this.nowIndex=index;
  }
  }
 });
 </script>
</body>
</html>

2、通过改变当前值切换类名

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>点击切换</title>
 <style>
 .glyphicon-minus{
  color:#08f;
 }
 .glyphicon-plus{
  color:purple;
 }
 
 </style>
 <script src="js/vue.js"></script>
</head>
<body>
 
 <div id="box">
  <div style="width:100px; height:100px; background: #6bacdf;" v-show="isDisplay"></div>
 
  <div class="form-group">
  <button class="btn"
    :class="[isShow?'btn-primary':'']"
    @mouseover="toggleShow()"
    @mouseout="toggleShow()"
    v-text="btnStyle"></button>
 
  </div>
 
  <div class="">
  <button class="btn"
    :class="[isTrue?'glyphicon-minus':'glyphicon-plus']"
     @click="toggleBar()">切换类名按钮</button>
 
  </div>
 </div>
 
 
<script type="text/javascript">
 
 
  new Vue({
  el:'#box',
  data:{
   isDisplay:false,
   isShow: false,
   isTrue:true,
   btnStyle: 'Default'
  },
  methods:{
   toggleShow: function() {
   this.isShow = !this.isShow;
   },
   toggleBar:function(){
   this.isTrue = !this.isTrue;
   }
  },
  watch: {
   isShow: function(newVal) {
   // console.log(newVal);
   newVal ? this.btnStyle = 'Primary' : this.btnStyle = 'Default'
   }
  },
  });
 
 
 </script>
</body>
</html>

拓展知识:vue点击改变样式的实例

data里

isActive:-1,

method里

checkedItem(index){
 this.isActive=index;
},

页面里

<div v-for="(item,index) in nameoptions" v-bind:class="{active:index==isActive}" @click="checkItem(index)>{{item.name}}</div>

以上这篇Vue2.0点击切换类名改变样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
You might like
smarty简单入门实例
2014/11/28 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python中lambda()的用法
2017/11/16 Python
python操作redis方法总结
2018/06/06 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python关闭占用端口方式
2019/12/17 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
自我评价的写作规则
2014/01/06 职场文书
活动总结怎么写
2014/04/28 职场文书
敬老模范事迹
2014/05/21 职场文书
建筑安全标语
2014/06/07 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
何玥事迹观后感
2015/06/16 职场文书
教师节获奖感言
2015/07/31 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python