vue列表渲染

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            a{

                text-decoration: none;

                color: #999;

            }

        </style>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <h1>新闻列表</h1>

            <!--<div class="newItem" v-for='item in newList'>

                可以加上（item,index）获取索引值和每一项

            -->

            <div class="newItem" v-for='(item,index) in newList'>

                <a :href=" 'https://www.toutiao.com' + item.source_url">

                <h3>{{index+1}}、{{item.title}} </h3>

                <p>{{item.abstract}}</p>

                <img :src="item.image_url"/>

                </a>

                <hr />

            </div>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:'#app',

                data:{

                    newList:[]

                },

                methods:{

                },

                mounted:function(){

                    var that = this

                    $.ajax({

                        type:"get",

                        url:"newList.json",

                        async:true,

                        success:function(res){

                            console.log(res)

                            that.newList = res.data

                        }

                    });

                }

            })

        </script>

    </body>

</html>

vue_列表渲染的更多相关文章

  1. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  2. 微信小程序-视图列表渲染

    wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view ...

  3. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  4. 03-Vue入门系列之Vue列表渲染及条件渲染实战

    3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...

  5. 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器

    一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...

  6. 微信小程序-列表渲染多层嵌套循环

    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...

  7. 3-7 Vue中的列表渲染

     举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择in ...

  8. react 入坑笔记（五） - 条件渲染和列表渲染

    条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...

  9. React 学习(五) ---- 条件和列表渲染

    条件渲染 React中的条件渲染和我们平常写的js 代码一样,都是用的if else, 只不过在if else 中它的返回值是jsx, 根据不同的条件渲染不同的UI. 先写两个组件 //登录的用户显示 ...

随机推荐

  1. 看懂Qt源代码-Qt源码的对象数据存储

    第一次看Qt源代码的人都会被其代码所迷惑,经常会看到代码中的d_ptr成员.d_func(函数)和Q_DECLARE_PRIVATE等奇怪的宏,总是让人一头雾水,下面这篇文章转自http://www. ...

  2. Nginx负载均衡配置与负载策略

    原理 负载均衡的目的是为了解决单个节点压力过大,造成Web服务响应过慢,严重的情况下导致服务瘫痪,无法正常提供服务. 应用场景 春节期间在12306网站上买过火车票的朋友应该深有体会,有时查询一张火车 ...

  3. HttpURLConnection、HttpClient和Session

    原文地址:http://www.cnblogs.com/kross/p/3615695.html 一直没弄懂Session,cookies什么的登陆验证到底是怎么回事,昨天分别用HttpURLConn ...

  4. CF271D_Good Substrings

    给一个原串,以及那些字符是坏的,现在问你可以从原串中取出多少个不同子串,使得其所含的坏字符的个数不超过一个定数. 这个题目网上有各种各样的解法.如hash,tire. 我说一下我的解法. 解法一:后缀 ...

  5. nginx配置虚拟路径下载文件(.apk)

    公司将安卓apk文件放到服务器上,实现用户点击链接并下载 nginx version 1.14.1 nginx配置修改 server { listen 80; server_name localhos ...

  6. 关于IT个人看法

    对于理科生来说,理论和技术都是相当重要的,我很爱钻牛角尖,但是请理解‘固执的我’, 本人选择IT行业,其实也是偶然,带着质疑的眼光,成为了众多IT男中毫无‘特色’的一员,回忆 学习阶段,逐渐认识了IT ...

  7. 【刷题】BZOJ 1969 [Ahoi2005]LANE 航线规划

    Description 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系--一个巨大的由千百万星球构成的Samuel星系. 星际空间站的Samuel ...

  8. 51nod 1471 小S的兴趣 | 分块 链表

    51nod 1471 小S的兴趣 题面 小S喜欢有趣的事.但是,每个人的兴趣都是独特的.小S热衷于自问自答.有一天,小S想出了一个问题. 有一个包含n个正整数的数组a和针对这个数组的几个问题.这些问题 ...

  9. loj2540 「PKUWC2018」随机算法 【状压dp】

    题目链接 loj2540 题解 有一个朴素三进制状压\(dp\),考虑当前点三种状态:没考虑过,被选入集合,被排除 就有了\(O(n3^{n})\)的转移 但这样不优,我们考虑优化状态 设\(f[i] ...

  10. 如何使用android design support library

    Android应用Design Support Library完全使用实例 - OPEN 开发经验库http://www.open-open.com/lib/view/open143338585611 ...