<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. jekins job configure找不到remote trigger(script)

    今天想测试一下,remote的方式启动一个job,但是在“构建触发器”一栏根本找不到remote trigger,很惊讶的是在网上所有的doc或者demo里都是有这个选项的. 最后,终于找到了原因: ...

  2. 中证500等主要指数的市盈率(PE)估值高度

    全指医药(SH000991) - 2018-10-18日,当前值:22.8575,平均值:36.88,中位数:36.27655,当前 接近历史新低.全指医药(SH000991)的历史市盈率PE详情 中 ...

  3. ios开发之--首页 导航栏隐藏 下一级页面显示,pop回来显示白条

    解决方法,在首页中实现如下两个方法,代码如下: -(void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated] ...

  4. ios开发之--textview意见反馈页面(占位label,字数统计,提交按钮的交互设置)

    记录一个页面的功能: textview的占位符,字数统计,提交按钮的交互设置,具体效果图如下:

  5. 利用shell脚本自动获取awr报表

    观察Oracle数据库性能,oracle自带的awr功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.通过报告可以了解一个系统的整个运行情况,生成的报告包括多个 ...

  6. Kafka配置SSL(云环境)

    本文结合一个具体的实例给出如何在公有云环境上配置Kafka broker与client之间的SSL设置. 测试环境 阿里云机一台(Server端):主机名是kafka1,负责运行单节点的Kafka集群 ...

  7. NUC972裸机调试步骤

    .将开发板设置成USB启动.开发板拨码开关与启动方式设置对应如下: 其中PA1 ,PA0对应S1和S0 上电或复位,使开发板从USB启动.开启NuWriter,选择正确的芯片型号,按下“Continu ...

  8. Windows下POSIX线程编程(pThread)环境搭建

    系统: Windows 编辑器:codeblocks13.12 1. 简介: Windows有一个叫 POSIX Threads for Win32 的开源项目给出了一个功能比较完善的Windows下 ...

  9. tp3.2 ajax 表单提交

    前台: 1 <form action="javascript:;" method="post" class="form_div" id ...

  10. strcat的几种实现及性能比较

    一  原型说明 strcat()为C语言标准库函数,用于字符串拼接.函数原型声明在string.h头文件中: char *strcat(char *dest, const char *src); 该函 ...