利用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 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
javascript实现动态标签云
Oct 16 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
vue实现分页组件
Jun 16 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 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中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python引用传值概念与用法实例小结
2017/10/07 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python中修改字符串的四种方法
2018/11/02 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
四年级作文之植物
2019/09/20 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers