Vue中的v-for和v-bind结合使用小习题

最新推荐文章于 2022-08-02 22:38:29 发布
最新推荐文章于 2022-08-02 22:38:29 发布
阅读量2.1k 收藏 2
点赞数 3
文章标签： v-bind v-for 动态属性绑定 vue的for循环 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoxi_hahaha/article/details/106310099
版权

需求：

当你打开网页后，出现某个列表，默认情况下，列表中的第一项为红色，此后，当用户点击其中的任何一个列表项之后，此列表项变成红色，其它的列表项为黑色。

vue代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color:red;
    }

  </style>
</head>
<body>
<!--把第一条数据展现成红色，接下去点击谁，谁就变成红色-->

<div id="app">

  <ul>
    <li v-for="(m,index) in movies" :class="{active:currentIndex === index}"   @click="liClick(index)">{{index}}·{{m}}</li>
  </ul>

</div>
<script  src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      movies:['海王','海尔兄弟','火影忍者','进击的巨人'],
      currentIndex:0
    },
    methods:{
      liClick(index) {
        console.log(12);
        this.currentIndex=index;
      }
    }
  })
</script>

</body>
</html>

 

小C哈哈哈
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6和Vue的练习题
m0_60677470的博客
10-28 650
1、举例说明ES6和CommonJS的模块化机制，并说明他们的差异。 ES6 导入 import { firstName, lastName, a, post } from ‘./module1.js’; import { firstName as first, lastName as last } from ‘./module1.js’; 导入默认 import data from ‘./module1.js’ 导入全部 import * as data from ‘./module1.js’; 导入执
vue 自定义指令练习
Luckyzhoufangbing的博客
12-03 856
1. v-copy 一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上 const copy = { bind (el, binding) { // 一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上 el.$value = binding.value el.handle = () => { // 创建textarea标签 const textarea = document.createElement('textar
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-----v-for和v-bind结合使用
qq_48785525的博客
11-12 226
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red; } </style> </head> <body> <div id="app"> <ul>
vue语法 v-bind 和v-for联合使用，对比jquery
LYSMQ的博客
04-16 895
需求 有一个数组，使用v-for遍历出来后，点击其中一个使他具有一个属性（颜色变红） 使用vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
v-for一定要与v-bind:key="id"连用
weixin_30547797的博客
01-10 1190
1. v-for: <div v-for="(item,index) in todolist" v-bind:key="item.id"> </div> 2. v-if..... v-else : <div v-if="flag" v-bind:key="item.id"> </div> <div v-e...
vue指令练习
jinqianwang的博客
09-20 310
shopcar  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;scr
Vue.js前端开发实战-自测卷和课后习题答案.rar
07-10
3. **指令**：Vue.js提供了一系列预定义的指令，如`v-if`（条件渲染）、`v-for`（循环）、`v-bind`（属性绑定）等，这些指令简化了DOM操作。 4. **计算属性与侦听器**：计算属性用于根据其他数据计算值，而侦听器则...
我靠这个过了面试-2023前端之VUE面试题汇总-53页
最新发布
10-06
- **模板语法**：学习Vue中的插值表达式、指令（如v-if/v-else、v-for、v-bind、v-on）、计算属性和侦听器等。 - **生命周期**：理解Vue组件的创建、挂载、更新和销毁过程，以及对应的钩子函数（如beforeCreate、...
记录刷的练习题
qq_45659638的博客
08-02 1202
vue的基础练习题
Vue入门到放弃06(Vue v-for)
欢迎交流PHP和前端知识QQ：634487911
12-04 132
<body> <div id="app"> <!-- 原始操作 --> <p>{{list[0]}},{{list[1]}}、、、</p> <p v-for="item in list">{{item}}</p> <p v-for="(item, i)...
Vue的类名点击切换练习-深刻理解v-for中index的应用
yuan_xiaoxin的博客
11-25 981
Vue的类名点击切换-深刻理解v-for中index的应用以及v-bind的动态绑定属性不跟它做过多的憋憋!!!上代码!!! 不跟它做过多的憋憋!!!上代码!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
v-bind/v-on/v-for结合练习
407指导员
12-09 191
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作业
qq_27009517的博客
06-26 645
li点哪个，哪个变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
VUE初学--列表渲染v-for
qq_42970981的博客
11-19 823
列表渲染 v-for v-for 指令基于一个数组来渲染一个列表，需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法，itemList 是元数据素组， item 是被迭代的数组元素的 别名 注：我们可以用 of 替代 in 作为分隔符，它更接近 JavaScript 迭代器的语法 <div id...
Vue教程04：v-for指令
Lee Chen的博客
12-05 1209
v-for循环数组、对象 代码参考：/lesson04/01. v-for指令.html 使用v-for=&quot;(item, index) in items&quot;就可以将数组或对象中的数据循环输出。 JavaScript： let vm = new Vue({ el: '#app', // 根元素或挂载点。 data: { users: [ { name: 'lee', p...
Vue语法之v-for与v-bind结合
Mr_xiaoxuboke的博客
05-19 948
说明: 方法一：里面的对象方法使用v-for遍历movies的元素和索引，:key后面会说到，这里就先不说，最好是加上，后面会有用，再动态绑定class对象，让索引等于当前元素的索引，最后使用@click添加一个监听事件，通过method中的调用让当前元素点击时发生变色。 方法二：在动态绑定class对象使用了三元表达式，其他都和方法一一样，使用三元表达式判断索引是否等于当前元素的索引，如果是返回style定义好的样式，否则为空，也就是变回原样。 代码如下： <!DOCTYPE html
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结合使用实现动态添加class
qq_43593912的博客
09-30 498
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏激活</title> <style> .active{ color:red } </style> </head> <body> <div id="app"> <ul>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值