v-bind 与v-for的结合

已于 2022-06-13 11:44:34 修改
阅读量144 收藏
点赞数
文章标签： vue.js
于 2022-05-19 19:35:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bh510055858/article/details/124869252
版权

v-bind

动态class的写法 对象的写法
 如何去反
 如何封装对象 

v-bind动态绑定class对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
		<h2 :class="getactive()">(｡･∀･)ﾉﾞ嗨！</h2>
		<button type="button" @click="changeActive()">切换</button>
		</div>
		<script src="../js/vue.js">
			
		</script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#app",
				data(){
					return{
						isactive:true
					}
				},
				methods:{
					getactive(){
						return{
							active:this.isactive
						}
					},
					changeActive(){
						this.isactive=!this.isactive
					}
				},
				computed:{
					
				}
			})
		</script>
	</body>
</html>

v-bind动态绑定class数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<h2 class="title" :class="['active','line']">{{message}}</h2>
			<h2 class="title" :class="[active,line]">{{message}}</h2>
			<h2 class="title" :class="getClasses()">{{message}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return{
						message:"你好啊",
						active:'aaa',
						line:'bbb'
					}
				},
				methods: {
						getClasses(){
						return [this.active,this.line]
					}
				},
				computed:{
				}
			})
		</script>
	</body>
</html>

v-for与v-bind的结合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in movies" :key="index" :class="{active:index==currentIndex}" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>
			<ul>
				<li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''" @click="changeColor(index)">{{index}}--{{item}}</li>
			</ul>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						currentIndex: 0,
						movies: ["死神", "海贼王", "火影忍者", "全职猎人"]
					}
				},
				methods: {
					changeColor(a) {
						console.log(a);
						this.currentIndex = a
					}
				},
				computed: {

				}
			})
		</script>
	</body>
</html>

ggks
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-for与v-bind结合的实例
weixin_41575397的博客
11-23 311
v-for与v-bind结合的实例：实现点击列表中的单行文字变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .active{ color: red; } </style> <div id="
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
前端学习（2072）：v-bind和v-for结合的作业布置
歌谣的博客
08-26 326
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; ; } </style> </head> <body.
前端学习（2358）：v-bind和v-for
歌谣的博客
10-05 173
geyao.vue <template> <view> <view> {{msg}} </view> <view> {{'你好'+'世界'}} </view> <image v-bind:src="imgUrl" mode=""></image> <view v-for="(item,index) in arr"> 序号:{{index}}
v-for和v-bind结合
weixin_44289916的博客
11-13 1331
使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
VUE V-for和V-bind结合使用 v-if重加载
weixin_44153063的博客
11-23 1250
记 最近在做一个Vue的动态页面，在使用v-for循环遍历从后台加载的数据时，获取不到数据，就是说 v-for在还没有获取后台数据就进行了循环，查询了资料以及自己的想法，最后想到了一个思路 在加载完数据后重新加载页面的部分内容，利用的是v-if来实现，v-show是实现不了的，v-show是把元素的display属性设置为none来实现的显示隐藏，而v-if是通过控制dom节点的存在与否来控制元素的显隐；所以可以用来实现重加载的效果。 经过实践，成功的利用v-for把后台的数据循环遍历了~ 首先给元素添加
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
`v-if`也可以与`<template>`标签结合，用于创建条件性的模板块。 2. `v-else-if`用于在`v-if`之后添加额外的条件检查。如果`v-if`的条件不满足，会尝试评估`v-else-if`的条件。 3. `v-else`不接受任何表达式，它仅...
vue使用v-for实现hover点击效果
10-17
在Vue.js中，我们可以利用其强大的数据绑定和事件处理能力来实现复杂的功能，比如在使用`v-for`循环遍历列表时，同时实现鼠标悬停（hover）和点击效果。`v-for`指令用于渲染列表或数组，而`v-on`指令（通常简写为`@`...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
03-08
在Vue中，有几个核心指令用于构建动态用户界面，这些指令包括`v-for`、`v-bind`、`v-if/v-else`、`v-show`、`v-model`和`.v-on`。下面将详细介绍这些指令的使用方法和场景。 1. `v-for`: 这个指令用于在DOM元素上...
v-bind Vue基础指令学习.rar
08-11
`v-on`指令可以与`v-bind`一起使用，结合事件修饰符，如`.stop`, `.prevent`, `.capture`, `.self`, `.once`等，实现更复杂的事件处理。 总结，`v-bind`是Vue.js中的关键指令，它实现了数据与DOM元素属性之间的动态...
v-for和v-bind的结合作业，使用数组下标作为属性值的问题
Tall_Cold_Q的博客
02-21 250
v-bind绑定class（对象方式）的key所对应的value值是一个数组
Vue:v-bind与v-for结合练习
lzzw的学习之路
08-11 248
一、需求 一个列表，鼠标点击哪个列表项，就改变哪个列表项的样式 注：自行更改对应自己电脑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结合使用
Q2159621453的博客
05-19 246
<script src="../vue.js"></script> <style> .active { color: red; } </style> <div id="app"> <ul> <li v-for="(item,index) in dataObj" :key="index" ...
在Vue中利用v-for和v-bind结合使用实现动态添加class
qq_43593912的博客
09-30 476
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏激活</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <ul>
v-bind/v-on/v-for结合练习
407指导员
12-09 182
v-bind/v-on/v-for结合练习 鼠标点哪个电影其变为红色，默认第一个红色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .Red { color: red; } </style> </head> <body&g
Vue语法之v-for与v-bind结合
Mr_xiaoxuboke的博客
05-19 940
说明: 方法一：里面的对象方法使用v-for遍历movies的元素和索引，:key后面会说到，这里就先不说，最好是加上，后面会有用，再动态绑定class对象，让索引等于当前元素的索引，最后使用@click添加一个监听事件，通过method中的调用让当前元素点击时发生变色。 方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。 代码如下： <!DOCTYPE html
v-bind和v-for的使用
Stitch_xiao的博客
12-02 1026
v-bind动态绑定属性 在data中定义了一张图片，我们希望把这张图片渲染到而面上 export default { data() { return { img:"../../static/qiao.jpg", } }, methods: { } } 利用v-bind进行渲染 <image v-bind:src="img" mode=""></image> 可以缩写成： <image :src="img" mod
Vue中的v-for和v-bind结合使用小习题
xiaoxi_hahaha的博客
05-24 2083
需求： 当你打开网页后，出现某个列表，默认情况下，列表中的第一项为红色，此后，当用户点击其中的任何一个列表项之后，此列表项变成红色，其它的列表项为黑色。 vue代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:r
v-for和v-bind的结合使用
ojb98K的博客
01-31 3003
<html> <style> .active { color: red; } </style> <body> <div id="app"> <ul> <li @click="getClasses(index)" v-for="(item,...
v-bind的属性。
最新发布
06-27
`v-bind`，也称为 `v-bind:class` 或 `v-bind:style`，是 Vue.js 框架中的指令之一，用于在模板中动态地绑定元素的属性。它允许你根据数据的变化来实时更新元素的属性值。具体来说： 1. **v-bind:class**: 当你想要根据某个数据条件改变元素的 CSS 类名时，使用这个指令。例如： ``` <div v-bind:class="{ active: isActive }"> <!-- 当isActive为true时，div将拥有active类 --> </div> ``` 2. **v-bind:style**: 用来动态设置元素的内联样式，数据驱动地更新样式。例如： ``` <p v-bind:style="{ color: backgroundColor, fontSize: fontSize + 'px' }"></p> ``` `v-bind` 可以与其他指令如 `v-if` 和 `v-for` 结合使用，提供了一种灵活的方式来响应数据变化和控制视图展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值