利用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 showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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
Zend Guard一些常见问题解答
2008/09/11 PHP
PHP程序中的文件锁、互斥锁、读写锁使用技巧解析
2016/03/21 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
图片完美缩放
2006/09/07 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
vue跨域解决方法
2017/10/15 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
快速了解python leveldb
2018/01/18 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python实现两个文件合并功能
2018/04/01 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python import 上级目录的导入
2020/11/03 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
电子商务专业实习生自我鉴定
2013/09/24 职场文书
基层干部十八大感言
2014/01/19 职场文书
运动会领导邀请函
2014/02/05 职场文书
节能环保口号
2014/06/12 职场文书
七夕情人节问候语
2015/11/11 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Pandas-DataFrame知识点汇总
2022/03/16 Python