利用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异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
问卷调查计划书
2014/01/10 职场文书
销售助理岗位职责
2014/02/21 职场文书
法制演讲稿
2014/09/10 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
求职自我评价参考范文
2019/05/16 职场文书
React中的Context应用场景分析
2021/06/11 Javascript