v-for和v-bind结合

最新推荐文章于 2023-12-27 16:50:13 发布
最新推荐文章于 2023-12-27 16:50:13 发布
阅读量1.3k 收藏 3
点赞数 5
分类专栏： Vue 文章标签： v-for和v-bind结合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44289916/article/details/103058914
版权
使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。
<!DOCTYPE html>
<html lang="en">
<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>作业(v-for和v-bind的结合)</title>
  <style>
    .active{
      color:red;
    }
  </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>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        currentIndex:0,
        movies:["海王","海贼王","火影忍者","复仇者联盟"]
      },
      methods: {
        changeColor(index){
          this.currentIndex = index
        }
      },
    })
  </script>
</body>
</html>

v-for时候的index索引，给每行绑定事件点击事件，点击当行是获取此行索引index并赋值给currentIndex，使用v-bind:绑定class，当index===currentIndexDom元素有active的class，颜色变红。

蓝眼睛小妖怪
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
v-for与v-bind结合的实例
weixin_41575397的博客
11-23 312
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-bind动态绑定属性、v-for和v-bind结合
m0_59707151的博客
05-19 208
1.v-bind动态绑定class 1.1 v-bind动态绑定class(对象用法) .active{ color: red; } ​<div id="app"> <!-- <h2 :class="{active:isactive}">改变class</h2> --> <h2 :class="getactive()">改变class</h2> <button type="button" @click="c
v-for和v-bind的结合使用
ojb98K的博客
01-31 3008
<html> <style> .active { color: red; } </style> <body> <div id="app"> <ul> <li @click="getClasses(index)" v-for="(item,...
VUE V-for和V-bind结合使用 v-if重加载
weixin_44153063的博客
11-23 1274
记 最近在做一个Vue的动态页面，在使用v-for循环遍历从后台加载的数据时，获取不到数据，就是说 v-for在还没有获取后台数据就进行了循环，查询了资料以及自己的想法，最后想到了一个思路 在加载完数据后重新加载页面的部分内容，利用的是v-if来实现，v-show是实现不了的，v-show是把元素的display属性设置为none来实现的显示隐藏，而v-if是通过控制dom节点的存在与否来控制元素的显隐；所以可以用来实现重加载的效果。 经过实践，成功的利用v-for把后台的数据循环遍历了~ 首先给元素添加
前端学习（2764）：v-bind和v-for
歌谣的博客
12-16 185
v-bind和v-for的使用
Stitch_xiao的博客
12-02 1032
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
解决v-for中使用v-if或者v-bind:class失效的问题
10-17
在Vue.js开发过程中，我们经常会遇到在`v-for`循环中使用`v-if`或`v-bind:class`（简写为`:class`）时遇到一些失效的问题。这主要是由于Vue的渲染机制导致的，理解这个问题的关键在于理解Vue的响应式系统和虚拟DOM的...
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元素上...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
`v-if`也可以与`<template>`标签结合，用于创建条件性的模板块。 2. `v-else-if`用于在`v-if`之后添加额外的条件检查。如果`v-if`的条件不满足，会尝试评估`v-else-if`的条件。 3. `v-else`不接受任何表达式，它仅...
VUE中v-model和v-for指令详解
12-07
在Vue.js中，`v-model`和`v-for`是两个非常重要的指令，它们扩展了HTML元素的功能，使得数据绑定和列表渲染变得简单易用。...在实际开发中，结合使用`v-model`和`v-for`可以构建出交互性极强且数据驱动的用户界面。
Vue 中指令v-bind的补充、v-for的使用，两者的结合使用。
yzq0820的博客
07-26 1155
一、v-bind动态绑定class1. v-bind动态绑定class(对象语法)这里举简单例子来体现绑定效果，设置一个按钮可以控制对象里面元素的颜色，这时候对象就要绑定动态事件，才能实现变化。有两种绑定的方法一种直接在h5中直接绑定颜色变化，另一种是调用函数的方式绑定，需要注意，直接写就不需要this，但是在调用函数里面需要使用this才能实现。其中还要注意，变色的条件是自己设置了一个为false点击后取反出现，然后再取反，就会出现变色不变色的样class属性中可以放数组，会依次解析成对应的class。.
#Vue：{{}}(文本)、v-bind(属性)、v-if(条件)、v-for(循环)、v-on(事件监听器) 方法、v-model 双向绑定 @FDDLC
LiuXingchang的博客
12-14 324
一、{{}}：文本 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script src="vue.js"></script><!--注意：要先引入Vue，然后才能使用Vue的语法--> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri
Vue语法之v-for与v-bind结合
Mr_xiaoxuboke的博客
05-19 948
说明: 方法一：里面的对象方法使用v-for遍历movies的元素和索引，:key后面会说到，这里就先不说，最好是加上，后面会有用，再动态绑定class对象，让索引等于当前元素的索引，最后使用@click添加一个监听事件，通过method中的调用让当前元素点击时发生变色。 方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。 代码如下： <!DOCTYPE html
vue的v-for、v-model、v-bind的基本使用
Lu_menglin的博客
12-27 1177
data: {//数组arr2: [{title: '星期一'}, {title: '星期二'}, {title: '星期三'}],//对象area: {"A": ["安阳", "安徽"],"B": ["北京", "保定"],"C": ["长安", "长沙"]},},vue循环数组v-for循环数// v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标。
Vue 常用内置指令（v-if、v-for、v-bind、v-on）
QIANDXX的博客
07-23 1587
指令：是指 Vue 提供的以 “v-” 前缀的特性，当指令中表达式的内容发生变化时，会连带影响 DOM 内容发生变化。 v-if 指令 条件渲染指令，动态在 DOM 内添加或删除 DOM 元素； 使用场景： 多个元素 通过条件判断展示或者隐藏某个元素； 进行两个视图之间的切换； 示例： <script> window.onload =function(){ //创建一个vue实例 var app = new Vue({ el: '#app',
vue的常用指令【v-bind v-for v-on v-model 自定义指令】
weixin_46336091的博客
11-16 774
除了用内置的指令完成vue工作需要后，还可以根据vue提供的方案完成自定义指令自定义指令：操作domdom对象.style.color='red'自定义指令它提供了5个钩子函数，它可以帮我们实现所需要的各种业务场景el 当前绑定到指令元素的dom对象,bindings 修饰符和传入的值bind 第一次绑定到元素时调用inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 数据更新时调用。
Vue中的v-for和v-bind结合使用小习题
xiaoxi_hahaha的博客
05-24 2102
需求： 当你打开网页后，出现某个列表，默认情况下，列表中的第一项为红色，此后，当用户点击其中的任何一个列表项之后，此列表项变成红色，其它的列表项为黑色。 vue代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:r
v-for中v-bind：key绑定的参数区别
热门推荐
luwenze的博客
11-27 1万+
&lt;li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id"&gt;{{item.id}}&lt;/li&gt; 1.使用给数组对象绑定的id属性 // items data items: [ { id: 2, }, { id: 1, }, { id: 3, }, { id: 4, }, ] 2.使用...
Vue实战：v-for与v-bind实现列表颜色切换效果
"本文主要讲解如何使用Vue的v-for指令和v-bind绑定机制来实现列表项的颜色切换功能。通过示例代码和详细解释，帮助读者理解Vue中动态绑定类和处理用户交互的基本方法。" 在Vue.js中，v-for和v-bind是两个非常重要的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值