<template>
<div id="app">
<p v-for="x in list">{{x}}</p> //绑定列表
<p v-for="x in list1">{{x.name}}</p> //绑定列表
// 让第一个高亮显示
<p v-for="(x,k) in list" :class="{'red':k==0}">{{k}}--{{x}}</p>
// 让第二个变成蓝色
<p v-for="(x,k) in list" :class="{'red':k==0,'blue':k==1}">{{k}}--{{x}}</p>
</div>
</template>
<script>
export default {
name: 'App',
data (){
return {
msg:"你好!",
list:['a','b','c','d'],
}
}
}
</script>

vue--循环列表的更多相关文章

  1. Vue 循环为选中的li列表添加效果

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

  2. 循环列表的Java实现,解决约瑟夫环问题

    import java.util.Scanner; /** * 循环列表的Java实现,解决约瑟夫环问题 * * @author LIU * */ public class LinkedList { ...

  3. 微信小程序实现给循环列表点击添加类(单项和多项)

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  4. 页面中php传值后循环列表js获取点击的id

    页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...

  5. Cocos2d-x3.0下实现循环列表

    本文的实现是參照我之前在做iOS时实现的一个能够循环的列表这里用C++重写一遍. 效果: 原文地址:http://blog.csdn.net/qqmcy/article/details/2739301 ...

  6. python 单向循环列表

    # -*- coding: utf-8 -*- # @author: Tele # @Time : 2019/04/23 下午 6:54 # 单向循环列表 # 单向循环列表与单向列表的不同之处在于最后 ...

  7. Python循环列表的方法

    python循环列表的几种方法: 第一,依次打印列表中的各项值. 1 #!usr/bin/env python3 2 #!-*- Coding:utf-8 -*- 3 4 ''' 5 多种循环列表的方 ...

  8. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

  9. Unity-UGUI-无限循环列表

    前言:项目准备新增一个竞技场排行榜,策划规定只显示0-400名的玩家.我一想,生成四百个游戏物体,怕不是得把手机给卡死?回想原来在GitHub上看到过一个实现思路就是无限循环列表,所以就想自己试试.公 ...

  10. Vue 基本列表 && 数据过滤与排序

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

随机推荐

  1. Unity接第三方SDK时遇到的坑

    1.大部分SDK的方法需要在线程中执行,一般会放在主线程里执行,安卓中主线程一般用于UI渲染. this.runOnUiThread(new Runnable() { @Override public ...

  2. mysql中已经存在某个库中有大小写的表,将lower_case_table_names由0改为1对已经存在的表是否有影响?

    需求描述: 今天遇到了修改lower_case_table_names参数的问题,想了下,如果原来里面有表,表名有大小写的, 如果将lower_case_table_names从默认的0改为1之后,那 ...

  3. html 内联函数宽度设置

    width and/or height in tables are not standard anymore; as Ianzz says, they are depreciated. Instead ...

  4. 怎样把网站升级到http/2

    https://juejin.im/post/59c63adf6fb9a00a4c271484

  5. Spring父容器与子容器

    在使用spring+springMVC的web工程中,我们一般会在web.xml中做如下配置: <context-param> <param-name>contextConfi ...

  6. SpringMVC由浅入深day02_10拦截器

    10 拦截器 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 10.1 拦截定义 定义拦截器,实现HandlerInte ...

  7. mongodb 初学 目录

    mongodb 初学 索引 啦啦啦 MongoDB 教程 NoSQL 简介 MongoDB 简介 Windows 平台安装 MongoDB Linux平台安装MongoDB mongodb 在 Ubu ...

  8. 8 -- 深入使用Spring -- 3...1 Resource实现类FileSystemResource

    8.3.1 Resource实现类------FileSystemResource:访问文件系统的资源的实现类 3.访问文件系统资源 Spring提供的FileSystemResource类用于访问文 ...

  9. Splash runjs() 方法

    runjs() 方法可以执行 JavaScript 代码,它与 evaljs() 功能类似,但是更偏向于执行某些动作或声明某些方法 function main(splash, args) splash ...

  10. [Python] NotImplemented 和 NotImplementedError 区别

    NotImplemented 是一个非异常对象,NotImplementedError 是一个异常对象. >>> NotImplemented NotImplemented > ...