利用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 checkbox,radio是否选中的判断代码
Mar 20 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
微信小程序中转义字符的处理方法
Mar 28 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
php增删改查示例自己写的demo
2013/09/04 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python tornado上传文件的功能
2020/03/26 Python
用python读取xlsx文件
2020/12/17 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
仓库管理专业个人的自我评价
2013/12/30 职场文书
车队司机自我鉴定
2014/03/02 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
公务员培的训心得体会
2014/09/01 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技