VUE-使用v-bind和v-for动态变换列表样式

最新推荐文章于 2023-07-10 21:46:09 发布
最新推荐文章于 2023-07-10 21:46:09 发布
阅读量338 收藏 1
点赞数 1
分类专栏： VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ml_YSY/article/details/111599386
版权 
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="vue.js"></script>
	<style type="text/css">
		.active{
			color: black;
		}
		.add2{
			color: #ff0000;
		}
	</style>
</head>
<body>
	<div id="app">
		<ul>
			<li class="active" :class="{'add2':index==dynamic}" v-for="(m, index) in movies" @click="dian(index)">{{m}}<li>
		</ul>
	</div>
</body>
<script>
	const app = new Vue({
		el:'#app',
		data:{
			movies:['喜洋洋与灰太狼', '迪迦奥特曼', '虹猫蓝兔七侠传', '蓝精灵', '宝葫芦'],
			dynamic: -1,
			cla: 'add2'
		},
		methods:{
			dian:function(index){ 
					this.dynamic = index;
			}
		}
	})
</script>
</html>

 

ml_YSY
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现列表点击动态改变样式
qq_43858258的博客
07-14 1331
vue实现列表点击动态改变样式 一、实现原理 v-for进行列表循环 v-bind动态绑定 二、实现 1.v-for循环列表 data(){ return{ currentIndex:0, } } <ul> <li class="showplace-left-content" v-for="(item, index) in leftList" :key="index" >
v-for v-bind:class,动态改变li样式
LuckyMon的博客
03-18 2536
纯css，伪类，伪元素 在对元素样式做改变时，非常方便，也可以结合v-for，一起使用，但仅支持几种方式： link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 v-for v-bind:class &amp;lt;li v-for=&quot;item in 4&quot; :key=&quot;item&quot; v-bind:class=&quot;{onshow:
vue的v-bind,v-for,v-if,v-model,v-on
viviliving的专栏
09-02 125
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> </head> <body> <div id='app'> <p v-bind:style="'color:' + my_color">Vuejs 学起来好开心~ </p> </div> <s.
11-常用指令v-bind
m0_57783938的博客
08-20 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10-常用指令v-bind</title> <script src="js/vue.js"></script> </head> <body> <!-- 1.什么是v-bind指令 在企业开发中想要给"元素"绑定数据, 我.
Vue指令03——v-bind和v-for的使用
qq_57340195的博客
03-29 262
Vue指令03——v-bind和v-for v-bind命令 效果：更改元素属性，如 src、title、href 格式：v-bind：属性=”变量“ 格式：：属性=”变量“ 修改行类样式1 <!--绑定样式--> <div id="app"> <!-- 绑定样式属性值 --> <div v-bind:style="{backgroundColo...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
总结来说，Vue.js 中的 `v-bind` 和 `props` 结合使用，提供了一种强大的机制，使得父组件能够灵活地向子组件传递动态数据，并且子组件可以根据这些数据进行相应的展示或逻辑处理。这对于构建复杂的组件结构和实现...
浅析Vue.js中v-bind v-model的使用和区别
10-17
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下
利用Vue的v-for和v-bind实现列表颜色切换
10-15
主要介绍了利用Vue的v-for和v-bind实现列表颜色切换，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue reactive ref v-bind 语法示例演示代码
07-17
bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-...
Vue v-for computed 生命周期和模板引用 语法示例演示代码
最新发布
07-17
Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 语法示例演示代码Vue v-for computed 生命周期和模板引用 ...
Vue:v-bind与v-for结合练习
lzzw的学习之路
08-11 246
一、需求 一个列表，鼠标点击哪个列表项，就改变哪个列表项的样式 注：自行更改对应自己电脑vue.js文件的路径位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.
v-for遍历数组或者对象，渲染结构、v-bind动态设置class和style
派拉斯兔子的博客
07-10 5469
作用：可以遍历数组或者对象，用于渲染结构。 遍历数组语法： ⚫ v-for="item in 数组名" ⚫ v-for="(item, index) in 数组名“ 遍历对象语法：v-for = "(value , key) in 对象名" 遍历数字语法：v-for = "item in 数字" key值：①、不写：默认按照下标给虚拟dom打标识。 ②、index：按照下标给虚拟dom打标识index！就地复用dom节点效率会低。 ③、id：按照下标给虚拟dom打标识id！就地复用dom节点效率会
a标签 vue 动态点击_【Vue】Vue学习之动态组件
weixin_39983223的博客
12-28 171
在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。 ---摘自《Vue.js从入门到项目实战》学习过动态组件过后，我来分享个人见解，希望可以帮到同样在学习Vue的朋友们。Vue是完全...
第四篇 Vue中的动态切换 ( v-bind ) 1.0
灵魂学者的博客
08-21 833
Vue中的动态切换，v-bind:class实现动态切换的对象写法以及数组写法，v-bind:style的操作也是同理
02-vue(轮播图,v-bind对象用法,v-for指令,v-if指令,v-else-if,v-else指令,key值的基本使用,v-show指令,英雄搜索案例)
Tangoneone的博客
05-05 765
01-作业-轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
vue.js之v-for循环中动态改变每个item的样式
weixin_34242819的博客
10-12 1855
为什么80%的码农都做不了架构师？>>> ...
vue v-for 遍历时动态生成key 动态增删数据
jiuweiyaoy的博客
12-14 4549
  效果图：  
vue的常用指令【v-bind v-for v-on v-model 自定义指令】
weixin_46336091的博客
11-16 735
除了用内置的指令完成vue工作需要后，还可以根据vue提供的方案完成自定义指令自定义指令：操作domdom对象.style.color='red'自定义指令它提供了5个钩子函数，它可以帮我们实现所需要的各种业务场景el 当前绑定到指令元素的dom对象,bindings 修饰符和传入的值bind 第一次绑定到元素时调用inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 数据更新时调用。
Vue语法之v-for与v-bind结合
Mr_xiaoxuboke的博客
05-19 933
说明: 方法一：里面的对象方法使用v-for遍历movies的元素和索引，:key后面会说到，这里就先不说，最好是加上，后面会有用，再动态绑定class对象，让索引等于当前元素的索引，最后使用@click添加一个监听事件，通过method中的调用让当前元素点击时发生变色。 方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。 代码如下： <!DOCTYPE html
vue2动态修改样式
qq_26780317的博客
01-19 3443
vue 动态的修改样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值