如何利用VUE动态添加class样式

看注释, 就可以理解原理

<body><!-- 需求, 在每次点击li的时候, 当前的li添加class, 其余的li删除class --><div id="app"><ul><!-- @click="getClass(index) 在每次点击li后调用getClass方法 --><!-- :class="{'red':index==current}" 动态绑定class, 并且进行判断, 当下标index与current相等的时候, 才会添加red这个class样式 --><!-- v-for="(item,index) in movies" 循环创建li, 并将每一个li都添加一个下标index --><li @click="getClass(index)" :class="{'red':index==current}" v-for="(item,index) in movies">{{item}}</li></ul></div><script>const app = new Vue({el: "#app",data: {current: 0, // 决定是哪一个li添加red样式movies: ["海王", "火影忍者", "海尔兄弟", "肖申克的救赎"],},methods: {getClass: function (index) {// 在每次点击的时候, 将下标值赋给current 再加上index==current条件, 达到动态添加class的效果this.current = index;}}})</script>
</body>

如何利用VUE动态添加class样式相关推荐

vue动态添加style样式
注意: 凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize 除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...
vue 修改模板{{}}标签_详解Vue 动态添加模板的几种方法
以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在*.vue文件里的 template 标签里写模板.但是有时候会需要动态生成 ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
vue动态获取css样式,Vue 框架之动态绑定 css 样式实例分析
今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分首先说一下动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=""就可以了,使 ...
vue 动态添加html属性,vue.set如何添加属性？
在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...
利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
js 关于动态添加class样式的学习
如果,我这里有一个需求.如下的页面代码 <body> <input type="button" value="红" id="btn1 ...

如何利用VUE动态添加class样式

看注释, 就可以理解原理

如何利用VUE动态添加class样式相关推荐

最新文章

热门文章