利用vue.js实现被选中状态的改变方法


Posted in Javascript onFebruary 08, 2018

在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。

html部分的代码:

<div data-role="page " class="page "> 
 <div class="center " id="app"> 
 <div class="group "> 
 <ul> 
 <li v-for = "todo in todos "> 
  <div class="groupheader "> 
  <div class="Gheadertext ">{{todo.groupheader}}</div> 
  </div> 
  <div class = "groupbody "> 
  <ul class="list "> 
  <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> 
  <div class="celltext"> 
   {{ cell.text }} 
  </div> 
  <img class="selectimg" src="img/select.png "> 
  </li> 
  </ul> 
  </div> 
  </li> 
 </ul> 
 </div> 
 </div> 
</div>

数据代码:

var datas = { 
 todos :[ 
 { 
 groupheader : 'MB3101', 
 groupbody:[ 
  { text: '调整不当'}, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3102', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 }, 
 { 
 groupheader : 'MB3103', 
 groupbody:[ 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
  { text: '调整不当' }, 
  { text: '光电开关损坏' }, 
  { text: '镜面积灰' }, 
 ] 
 } 
 ] 
}

js部分的代码:

new Vue({ 
 el: '#app', 
 data:datas, 
 methods:{ 
 exchange:function(event){ 
  //获取被点击的元素对象 
  var a = event.target; 
  //获取被点击元素中的子元素<img> 
  var cellimg = a.getElementsByTagName("img")[0]; 
  if(a.className == "groupcell") { 
  a.className = "selectcell"; 
  cellimg.style.display = "block"; 
 } 
 else if(a.className == "selectcell") { 
  a.className = "groupcell"; 
  cellimg.style.display = "none"; 
 } 
 } 
 } 
})

效果如图所示:

利用vue.js实现被选中状态的改变方法

以上这篇利用vue.js实现被选中状态的改变方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
javascript中indexOf技术详解
May 07 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
详解如何用模块化的方式写vuejs
Dec 16 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
vue全屏事件开发详解
Jun 17 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 #Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 #Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 #Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 #Javascript
Ionic学习日记实现验证码倒计时
Feb 08 #Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 #Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
You might like
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Django 解决由save方法引发的错误
2020/05/21 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
食堂员工工作职责
2013/12/18 职场文书
家教广告词
2014/03/19 职场文书
财产公证书样本
2014/04/04 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
母亲节感言
2015/08/03 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python