v-for的使用:

代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js v-for的使用 </title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <table border="1">

        <tr>

            <th>编号</th>

            <th>标题</th>

            <th>出品方</th>

        </tr>

        <tbody>

            <tr v-for="v in list"><!--写成 v of list 效果是一样的-->

                <td>{{v.id}}</td>

                <td>{{v.name}}</td>

                <td>{{title}}</td>

            </tr>

        </tbody>

    </table>

    <hr>

    <table border="1">

        <tr>

            <th>序号</th>

            <th>编号</th>

            <th>标题</th>

            <th>出品方</th>

        </tr>

        <tbody>

        <tr v-for="(v,k) in list"><!--写成 (v,k) of list 效果是一样的-->

            <td>{{k}}</td>

            <td>{{v.id}}</td>

            <td>{{v.name}}</td>

            <td>{{title}}</td>

        </tr>

        </tbody>

    </table>

</div>

<script>

    var app = new Vue({

        //element

        el:'#ask',

        data:{

            title:'简单记录',

            list:[

                {id:11,name:'vue学习记录'},

                {id:22,name:'vue学习笔记'}

            ]

        }

    });

</script>

</body>

</html>

Vue v-for使用 vue中循环输出数据的更多相关文章

  1. MYSQL中创建存储过程实现向表中循环插入数据

    首先在test数据库中先创建一个表test: CREATE TABLE test( ID INT PRIMARY KEY AUTO_INCREMENT ,test_name VARCHAR(20),t ...

  2. pandas向表格中循环写入数据

    pandas向表格中循环写入多行数据 import pandas as pd def list_topic(total_num, str1): """ 生成多个主题 :p ...

  3. 利用vue v-bind属性绑定bootstrap样式以及输出数据

    自从知道了bootstrap,就被他简介,大气美观的样式吸引,即使在vue框架中,仍旧想使用,下面给出了vue适配版和原版的代码,以飨读者 数据输出部分 export default { data() ...

  4. Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

  5. php解析json数组（循环输出数据）的实例

    以快递100接口为例 返回的JSON数据 {"message":"ok","nu":"350116805826",&qu ...

  6. C#如何在各类控件中输入\输出数据

    文本框:TextBox Text - 按钮文字 TextBox.text=""; s=TextBox.text; 单选按钮+复选按钮 RadioButton,CheckBox Te ...

  7. robotframework从列表中循环读取数据，传入关键字执行

    场景预设:从列表内读取手机号,自动化执行微信加好友,直至选择完所有数据后,脚本停止执行 1.建一个备选数据表,表内列待添加的手机号数据 2.脚本的主要流程新加好友-输入手机号-添加好友-判断好友是否存 ...

  8. mysql中循环插入数据

    循环插入1w条数据 表结构: mysql> desc time_table; +-------+-----------+------+-----+-------------------+---- ...

  9. day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

    目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...

随机推荐

  1. WPF 动态列（DataGridTemplateColumn） 绑定数据 （自定义控件）

    原文:WPF 动态列(DataGridTemplateColumn) 绑定数据 (自定义控件) 因为项目需要 要实现这个~ 怎么实现画红框内容部分 田字格和上面Textbox 属于一个自定义控件  大 ...

  2. Eclipse maven创建web项目报错Could not resolve archetype

    1.下载http://repo1.maven.org/maven2/archetype-catalog.xml 通过eclipse下载和网页下载我这里都比较慢,最后用的迅雷下载 2.将本地xml文件配 ...

  3. Codeforces Round #594 (Div. 1) C. Queue in the Train 模拟

    C. Queue in the Train There are

  4. 【转】Ubuntu 16 安装 python 依赖出现 error: command 'i686-linux-gnu-gcc' failed with exit status 1

    问题 在 Ubuntu 下安装 python 依赖的时候出现以下错误 build/temp.linux-i686-3.5/_openssl.c:498:30: fatal error: openssl ...

  5. 打印对象(__str__()和__repr__())

    当打印一个类的实例时,返回的字符串是对象的地址信息,如<__main__.Student object at 0x109afb310>,很不好看 可通过在类内定义__str__(),这样打 ...

  6. git分支合并创建切换

    1. 场景描述 介绍下Git最新内容合并到主干.从主干创建最新分支.idea下切换最新分支,能在2分钟内完成git合并.分支创建以及在idea中完成切换,希望能帮到一些朋友. 2. 解决方案 从以下三 ...

  7. 09-Django静态文件

    1.静态文件 项目中的图片.CSS.js都是静态文件,一般会将静态文件放到一个单独的目录下,也方便管理.一般会将静态文件放到一个单独的目录下,也可以放在应用的目录下,由于静态文件是全部应用都在使用的, ...

  8. [06]ASP.NET Core中的进程内(InProcess)托管

    ASP.NET Core 进程内(InProcess)托管 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自<从零开始学 ...

  9. 一些常见的http状态码

    HTTP状态码是服务器和客户端之间交流信息的语言,下面列出一些常见的HTTP状态码. 1XX系列 指定客户端应相应的某些动作,代表请求已被接受,需要继续处理.由于在HTTP/1.0协议中没有定义任何1 ...

  10. Spring Cloud Gateway入坑记

    Spring Cloud Gateway入坑记 前提 最近在做老系统的重构,重构完成后新系统中需要引入一个网关服务,作为新系统和老系统接口的适配和代理.之前,很多网关应用使用的是Spring-Clou ...