<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. ubuntu 12.04 上网体验

    买了新的电脑,装的系统ubuntu12.04.  但是开始的时候无法使用有线网络,也没有办法连上无线网络.这相当于一个与世界剥离的裸机器,很是郁闷.于是在网上买了一个无线网卡tplink721, 但是 ...

  2. 五大行获央行5000亿SLF 相当于降准0.5%

    人民网北京9月17日电 (吕骞)据新浪财经报道,9月16日收盘后,市场传央行当天对五大行进行5000亿SLF操作,性质类同基础货币的投放,近似全面降准0.5个百分点.国泰君安.国信等数家机构晚间证实传 ...

  3. HTTP 请求未经客户端身份验证方案“Anonymous”授权。

    今天调取WebService的时候报: HTTP 请求未经客户端身份验证方案“Anonymous”授权. 解决办法: 配置文件里改: <basicHttpBinding> <bind ...

  4. Java压缩包解压到指定文件

    在获得一个以Zip格式压缩的文件之后,需要将其进行解压缩,还原成压缩前的文件.若是使用Java自带的压缩工具包来实现解压缩文件到指定文件夹的功能,因为jdk提供的zip只能按UTF-8格式处理,而Wi ...

  5. 6.824 Lab 5: Caching Extents

    Introduction In this lab you will modify YFS to cache extents, reducing the load on the extent serve ...

  6. flexbox子盒子order属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. flexbox父盒子align-content属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 华为手机nova2s使用第三方字体库

    准备好一个字体文件,例如mynew.tff 设置>显示>字体样式>最热,搜索免费,安装一款"兰亭黑体"字体(当然也可以购买) 可以在找到 文件管理>本地&g ...

  9. [SecureCRT] 解决 securecrt failed to open the host key database file 的问题

    SecureCRT 在 Windows XP 和 Windows 7 中的个人应用数据路径是不同的,在 Windows 7 中,应用数据路径为:C:\Users\<username>\Ap ...

  10. 阿里云CentOS7挂载SSD云盘的方法

    https://bbs.aliyun.com/read/151152.html 阿里云购买的第2块云盘默认是不自动挂载的,需要手动配置挂载上. 1.查看SSD云盘 sudo fdisk -l Disk ...