利用vue.js实现被选中状态的改变
2017-02-20 15:12
786 查看
在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。
html部分的代码:
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";
}
}
}
})
效果如图所示:
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 利用SocketCluster实现动态添加数据及排序
- vue.js利用defineProperty实现数据的双向绑定
- vue .js绑定checkbox并获取、改变选中状态的实例
- js实现动态改变radio状态
- 【111】Vue.js实现页面共用头部悬浮、共用底部跟随内容改变位置的例子。
- 利用js的call函数,实现this的改变
- Vue.js 利用v-for中的index值实现隔行变色
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- 利用Vue.js实现求职在线之职位查询功能
- js实现动态改变radio状态的方法
- 利用Vue.js实现拼图游戏
- Vue.js实战之利用vue-router实现跳转页面
- 【079】利用“剪叶子”算法实现树形结构的搜索功能,用Vue.js实现
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
- js 获取后台的字段 改变 checkbox的被选中的状态 代码
- js小练习:利用getElementsByTagName方法、for循环、this指针、数组实现对多个相同元素value值的改变
- vue中改变选中当前项的显示隐藏或者状态的实现方法
- vue2.0 引用qrcode.js实现获取改变二维码的样式