本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。
vue.js实现选中一行的方法:
实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示。熟悉JQuery的同学说这个太简单了。可以给这个选中的element设置一个active的class。配合Css样式,让active有选中高亮效果。但是谁说一定要用到jQuery呢。
最近在做的项目中,我尝试脱离JQuery,绕过JQuery,我所接触的大部分项目中好像不使用JQuery无法进行开发一样。它确实给开发者提供了太多便利。以至于大部分web网站都依赖它运行着。据w3Techs统计,JQuery的市场份额高达94.9��是时候脱离JQuery的束缚了。使用Vue.js更简洁,快速地实现。
使用Vue.js实现
javascript
new Vue({ el: "#app", data: { gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄', '守望先锋' ], activeName: '' }, methods: { selected: function(gameName) { this.activeName = gameName } } })
html
<div id="app"> <div class="collection"> <a href="#!" class="collection-item" v-for="gameName in gameNames" @click="selected(gameName)" :class="{active: activeName == gameName}">{{gameName}}</a> </div> </div>
以上就是vue.js怎么实现选中一行的详细内容,更多请关注易知道|edz.cc其它相关文章!