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. 《移动WEB前端高级开发实践@www.java1234.com.pdf》

    HTTP服务器: http-server 3.6.4 利用 Performance API 分析网站性能 页面加载生命周期 4. CSS3 伪类.伪元素, 看https://www.runoob.co ...

  2. 《Effective-Ruby》读书笔记

    本篇是在我接触了 Ruby 很短一段时间后有幸捧起的一本书,下面结合自己的一些思考,来输出一下自己的读书笔记 前言 学习一门新的编程语言通常需要经过两个阶段: 第一个阶段是学习这门编程语言的语法和结构 ...

  3. 借助Git实现本地与GitHub远程双向传输（同步GitHub仓库）以及一些使用错误解决

    前言 GitHub作为程序员必备的学习交流平台,虽然在国内速度不算快,但只要好好利用这个平台,我相信还是可以学习到很多东西.在暑期的时候,我曾经就初次远程连接到了GitHub,但开学后,不知道为什么又 ...

  4. 图解隐马尔可夫模型（HMM）

    写在前面 最近在写论文过程中,研究了一些关于概率统计的算法,也从网上收集了不少资料,在此整理一下与各位朋友分享. 隐马尔可夫模型,简称HMM(Hidden Markov Model), 是一种基于概率 ...

  5. MySQL（8）---游标

    Mysql(8)-游标 上一遍博客写了有关存储过程的语法知识 Mysql(7)---存储过程 游标或许你在工作中很少用到,但用不到不代表不去了解它,但你真正需要它来解决问题的时候,再花时间去学习很可能 ...

  6. VS2019安装好后，经常打不开软件没反应解决方法

    原文地址:https://blog.csdn.net/FL1623863129/article/details/89013137 VS2019于昨日正式发布,博主立马下载一个专业版尝尝鲜,但是发现项目 ...

  7. 从程序集加载类型，遇到 ReflectionTypeLoadException 的处理办法

    处理办法 catch ReflectionTypeLoadException ,然后从里面读取 Types 数据(成功加载的类型)就可以了. 参考 ReflectionTypeLoadExceptio ...

  8. ASP.NET(1)

    1.IIS安装问题,先装VS再装IIS,处理程序映射有问题,使用VS自带的控制台输入命令,注册路径 2.开发模式,一般处理程序,使用IO操作读取html文件,使前后端分离 3.post请求和get请求 ...

  9. SAP系统玩阴的？

    SAP系统玩阴的? 近日和项目上的ABAP开发顾问一起弄一个自开发的报表.其中某个栏位的取值需要从批次主数据里抓取到供应商代码,然后根据供应商代码取到供应商名称等.为此笔者需要备功能说明书.在说明书里 ...

  10. 开关VoLTE流程分析(一)

    开关按钮位置: 设置--> 更多--> 移动网络--> 增强型4G LTE模式 控件初始化addEnhanced4GLteSwitchPreference,该设置开关使用了Switc ...