Home > Article > Web Front-end > How to implement the selected change method using vue.js
Below I will share with you an article on how to use vue.js to change the selected state. It has a good reference value and I hope it will be helpful to everyone.
After using the prototype to change the unselected state, I came into contact with vue and wondered if I could use vue to implement the function. The page in the previous article did not dynamically implement the page, and all the data was not They are all written directly in html. After using vue, it has been possible to dynamically generate pages based on the amount of data. And the amount of code is also greatly reduced.
html part code:
<p data-role="page " class="page "> <p class="center " id="app"> <p class="group "> <ul> <li v-for = "todo in todos "> <p class="groupheader "> <p class="Gheadertext ">{{todo.groupheader}}</p> </p> <p class = "groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody" v-on:click="exchange($event)" class="groupcell"> <p class="celltext"> {{ cell.text }} </p> <img class="selectimg" src="img/select.png "> </li> </ul> </p> </li> </ul> </p> </p> </p>
Data code:
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: '镜面积灰' }, ] } ] }
The code of the js part:
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"; } } } })
The effect is as shown in the picture:
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use refs in React components
Cross-domain issues with proxyTable in the vue-cli project
The above is the detailed content of How to implement the selected change method using vue.js. For more information, please follow other related articles on the PHP Chinese website!