<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. 解决js中window.location.href不工作的问题

    E6中在html中<a>标识中通过JS添加click事件调用一个JS函数,例如: < script   type = "text/javascript" > ...

  2. bashrc profile的区别

    bashrc与profile的区别 bashrc和profile的差异在于:1. bashrc是在系统启动后就会自动运行.2. profile是在用户登录后才会运行.3. 进行设置后,可运用sourc ...

  3. AdoConnect-获取连接字符串 (工具)

    使用ADO访问数据库时需要设置正确的连接字符串,为此特提供一个获取连接字符串的小工具,方便编程使用. 使用方法: 1.点击“连接字符串”,弹出数据链接属性对话框 2.可以使用“提供程序”新建数据源,也 ...

  4. application/x-www-form-urlencoded 的contentType,POST数据内容过大,导致tomcat的request取不到参数

    如题, 可通过设置tomcat的connector的参数 server.xml中的connector中加上属性 maxPostSize="20971520" maxPostSize ...

  5. ./configure、make、make install 命令

    https://www.cnblogs.com/tinywan/p/7230039.html https://www.sohu.com/a/191735643_505857 ./configure 该 ...

  6. OpenCV学习笔记:opencv_highgui模块

    一,简介 本模块为跨平台的gui/IO组件,支持平台包括windows,linux,mac,IOS,android,可支持图像/视频/摄像头的读取显示以及转码. 二,分析 本模块为跨平台的gui/IO ...

  7. Go面向对象(三)

    go语言中的大多数类型都是值予以,并且都可以包含对应的操作方法,在需要的时候你可以给任意类型增加新方法.二在实现某个接口时,无需从该接口集成,只需要实现该接口要求的所有方法即可.任何类型都可以被any ...

  8. ubuntu 13.04 nginx.conf 配置详解

    1.nginx.conf 文件,路径为:/etc/nginx/agin.conf #使用的用户和组 user www-data; #指定工作衍生进程数(一般等于CPU总核数或总核数的两倍) worke ...

  9. Selenium 查找节点

    Selenium 可以驱动浏览器完成各种操作,比如填充表单.模拟点击等.比如,我们想要完成向某个输入框输入文字的操作,总需要知道这个输入框在哪里吧?而 Selenium 提供了一系列查找节点的方法,我 ...

  10. [Python] Python 之 function, unbound method 和 bound method

    首先看一下以下示例.(Python 2.7) #!/usr/bin/env python # -*- coding: utf-8 -*- class C(object): def foo(self): ...