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 Datagrid 控制 第一行和第一列之间的空白

    原文:WPF Datagrid 控制 第一行和第一列之间的空白 这个位置就是 这里 我们更改 DataGridControltemplate 模板 看树形结构 里面是一个BUtton 功能是全选 能找 ...

  2. linux 判断文件夹或文件是否存在

    文件夹不存在则创建 if [ ! -d "/data/" ];then mkdir /data else echo "文件夹已经存在" fi 文件存在则删除 i ...

  3. Codeforces Round #603 (Div. 2) B. PIN Codes 水题

    B. PIN Codes A PIN code is a string that consists of exactly 4 digits. Examples of possible PIN code ...

  4. Paper | LISTEN, ATTEND AND SPELL: A NEURAL NETWORK FOR LARGE VOCABULARY CONVERSATIONAL SPEECH RECOGNITION

    目录 1. 相关工作 2. 方法细节 2.1 收听器 2.2 注意力和拼写 本文提出了一个基于神经网络的语音识别系统List, Attend and Spell(LAS),能够将语音直接转录为文字. ...

  5. 初学者用js做的计算题

    1.苹果3元一个,鸭梨2元一个,桃子1元一个.现在想用200元买100个水果,在控制台中打印出来. var apple = 0; //苹果 var pear = 0; //梨 var peach = ...

  6. 为什么不允许使用 Java 静态构造函数？

    不允许使用 Java 静态构造函数,但是为什么呢?在深入探讨不允许使用静态构造函数的原因之前,让我们看看如果要使 构造函数静态化 会发生什么. Java 静态构造函数 假设我们有一个定义为的类: pu ...

  7. H5混合应用之X5内核

    一.X5内核介绍 X5内核是腾讯公司基于优秀开源 webkit 深度优化的浏览器渲染引擎,并且在2014年正式宣布开放给app开发者,所以现在可以在很多app上看到都是使用的X5内核实现Hybrid混 ...

  8. C++入门到理解阶段二基础篇(2)——C++注释、变量、常量、关键字、标识符

    目录 1.注释 注释作用 注释的方式 2.变量 变量基本知识 定义变量 3.常量 常量基本知识 整数常量 浮点常量 布尔常量 字符常量 字符串常量 常量定义 使用 #define 预处理器. 使用 c ...

  9. 前端之移动端库和框架bootstrap

    学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...

  10. wpf 当DataGrid列模版是ComboBox时，显示信息

    ​ 实际工作中,有时DataGrid控件某一列显示数据是从Enum集合里面选择出来的,那这时候设置列模版为ComboBox就能满足需求.而关于显示的实际内容,直接是Enum的string()返回值可能 ...