如何利用vue.js实现被选中状态
小编给大家分享一下如何利用vue.js实现被选中状态,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站IDC提供业务:雅安移动机房,成都服务器租用,雅安移动机房,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。
为什么要使用Vue
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中。而使用vue之后,已经能够实现页面根据数据的多少动态生成。而且代码量也大幅度减少。
html部分的代码:
{{todo.groupheader}}
{{ cell.text }}
数据代码:
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; //获取被点击元素中的子元素 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实现被选中状态
URL链接:http://ybzwz.com/article/ijihps.html