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. C# Stack 集合学习

    Stack 集合学习 学习自:博客园相关文章 Stack<T>集合 这个集合的特点为:后进先出,简单来说就是新元素都放到第一位,而且顺序移除元素也是从第一位开始的. 方法一:Push(T ...

  2. 小程序-API请求

    Page({ onLoad:function(){ // 在onLoad中调用发送请求的函数 this.getProList(); } getProList:function(){ var self= ...

  3. 《大数据技术应用与原理》第二版-第三章分布式文件系统HDFS

    3.1分布式文件 HDFS默认一个块的大小是64MB,与普通文件不同的是如果一个文件小于数据块的大小,它并不占用整个数据块的存储空间. 主节点又叫名称节点:另一个叫从节点又叫数据节点.名称节点负责文件 ...

  4. LOJ6033「雅礼集训 2017 Day2」棋盘游戏 （博弈论，二分图，匈牙利算法）

    什么神仙思路啊-- 看到棋盘就去想二分图.(smg啊)(其实是校内模拟赛有基本一样的题,只不过直接给了个二分图) 看到二分图就去想最大匹配.(我怎么想偶环的性质去了) (以下内容摘自这里) 这个二分图 ...

  5. python接口自动化7-post文件上传

    前言 文件上传在我们软件是不可少的,最多的使用是体现在我们后台,当然我们前台也会有.但是了解过怎样上传文件吗?这篇我们以禅道文档-创建文档,上传文件为例. post请求中的:Content-Type: ...

  6. Ajax和跨域请求

    Ajax 一.概述 Web 程序最初的目的就是将信息(数据)放到公共的服务器,让所有网络用户都可以通过浏览器访问. 在次之前,我们可以通过以下几种方式让浏览器发出对服务端的请求,获取服务端的数据: 地 ...

  7. dotnetcore实现Aop

    dotnetcore实现Aop Aop大家都不陌生,然而今天给大家不将讲官方的filter,今天给大家分享一个轻量级的Aop解决方案(AspectCore) 什么是AspectCore AspectC ...

  8. js获取计算机操作系统版本

    如题,想要获取当先计算机的操作系统和版本号的话,可以用如下方法. 首先,创建osversion.js文件,文件里面的代码如下 var osData = [ { name: 'Windows 2000' ...

  9. sed命令:删除匹配行和替换

    删除以a开头的行 sed -i '/^a.*/d' tmp.txt -i 表示操作在源文件上生效.否则操作内存中数据,并不写入文件中.在分号内的/d表示删除匹配的行 替换匹配行: sed -i 's/ ...

  10. WPF线段式布局的一种实现

    线段式布局 有时候需要实现下面类型的布局方案,不知道有没有约定俗成的称呼,我个人强名为线段式布局.因为元素恰好放置在线段的端点上. 实现 WPF所有布局控件都直接或间接的继承自System.Windo ...