<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="hdcms">

    <table border="1">

        <tr>

            <th>序号</th>

            <th>编号</th>

            <th>标题</th>

            <th>老师</th>

        </tr>

        <tbody>

        <!--可以用for in news 也可以用for of news-->

        <!--key是当前循环的每几条,是从0开始的-->

        <tr v-for="(field,key) of news">

            <td>{{key+1}}</td>

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

            <td>{{field.title}}</td>

            <td>{{name}}</td> <!--每次都取name值,不变-->

        </tr>

        </tbody>

    </table>

</div>

<script>

    var app = new Vue({

        el: '#hdcms',

        data: {

            name:'向军老师',

            news:[

                {id:22,title:'houdunren.com'},

                {id:77,title:'后盾人'}

            ]

        }

    });

</script>

</body>

</html>

效果:

17.VUE学习之- v-for指令的使用方法的更多相关文章

  1. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  2. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  3. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  4. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  5. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  6. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  7. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

  8. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  9. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

随机推荐

  1. Java多线程与并发——线程同步

    1.多线程共享数据 在多线程的操作中,多个线程有可能同时处理同一个资源,这就是多线程中的共享数据. 2.线程同步 解决数据共享问题,必须使用同步,所谓同步就是指多个线程在同一时间段内只能有一个线程执行 ...

  2. SQL判断经纬度在矩形内

    1,将城市地图拆分等距拆分为矩形 数据结构如图: 2.查看高德JS API (点是否在多边形内)核心代码: a=[114.069564,22.545774]; b=[ [114.067595,22.5 ...

  3. 解析和操作XML文件

    Dom4j工具 使用步骤: 1)导入dom4j的核心包. dom4j-1.6.1.jar 2)编写Dom4j读取xml文件代码 1,Domj4读取xml文件 ,准备工作:读取整个文档并获取根节点 // ...

  4. PHP实例：使用PHPExcel导入Excel2003文档和Excel2007文档到MySQL数据库中

    如果要使用phpExcelReader将Excel 数据导入到mysql 数据库,请读者点击这个文章查看. 使用phpExcelReader将Excel 数据导入到mysql 数据库. 下面我们介绍另 ...

  5. 将MySQL转化为mysqli

    <?php/** * Created by PhpStorm. * User: 大神 * Date: 2017/7/24 * Time: 11:29 */ header('content-typ ...

  6. 创建有输出参数的存储过程并在c#中实现DataGridView分页功能

    不足之处,欢迎指正! 创建有输出参数的存储过程 if exists(select * from sysobjects where name='usp_getPage1') drop procedure ...

  7. Android图表库XCL-Charts

    首先,这个是国人开发的,支持下必须顶!github项目地址:点击打开,由于项目的基本功能已经实现,所以项目作者也说以后基本不会在有更新了. 项目简介: Android图表库(XCL-Charts is ...

  8. ssm（Spring、Springmvc、Mybatis）实战之淘淘商城-第十三天(非原创）

    文章大纲 一.课程介绍二.SolrCloud介绍与搭建三.工程部署四.参考资料下载五.参考文章   一.课程介绍 一共14天课程(1)第一天:电商行业的背景.淘淘商城的介绍.搭建项目工程.Svn的使用 ...

  9. 电脑没有声音，显示“未插入耳机或扬声器”，检测不到Realtek高清晰音频管理器

    2018-7-16,电脑彻夜未关,早上发现已经死机了.关机重启之后,就发现没有声音了,提示“未插入耳机或扬声器”,并且检测不到Realtek高清晰音频管理器,只能检查到显卡音频输出.首先,音箱在其他电 ...

  10. css清除浮动好方法

    1.clear:both ==>IE6,7会有高度,所以去高度需要.clear{ clear:both; height:0px; margin:0; padding:0; width:0; bo ...