var typeSelect = new Vue({ el: , data: { selected: , cssText:{ : , : , : }, options: [ { text: , value: }, { text: , value: }, { text: , value: } ] }, computed:{ cssMsg:function(){ console.log(this) return this.cssText[this.selected]; } } })

最后在html中绑定通过computed方法得到数据也就是CSS：

<div > <pre > <code > {{ cssMsg }} </code> </pre> </div>

开发好之后，可以直接在chrome中运行来调试。打开扩展面板，勾选开发者模式，然后加载刚开发扩展所在的目录就可以直接运行了。

完整的源代码已上传在附件，可以下下来直接运行。

一个简单的插件就完成了，通过这一个简单的chrome插件就可以体验到vuejs在web开发中简单、优雅的魅力，还有什么理由不用起来呢。

【有奖讨论】程序员，怎么应对三十岁？ 点击查看详情

欢迎加入QQ群：374933367，与腾云阁原创作者们一起交流，更有机会参与技术大咖的在线分享！

Vue.js前后端同构方案之准备篇——代码优化
Vue组件开发实践之scopedSlot的传递
Vue.js 实战总结

此文已由作者授权腾讯云技术社区发布，转载请注明文章出处
原文链接：https://cloud.tencent.com/community/article/920462
获取更多腾讯海量技术实践干货，欢迎大家前往腾讯云技术社区