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. MFC各种属性设置

    在使用MFC的时候经常需要对例如对话框的外观进行一些设置.MFC哪些属性的含义和设置可以参照博客: http://www.cnblogs.com/lzmfywz/archive/2012/04/20/ ...

  2. AtCoder Regular Contest 081

    C - Make a Rectangle 从大到小贪心即可. # include <bits/stdc++.h> using namespace std; map<int,int&g ...

  3. hbase 分页过滤（新老API的差别）

    在hbase2.0以前分页过滤必须以上一次的最后一行+空字节数组作为下一次的起始行, 因为scan扫描的时候是包含起始行的,为了既能准确定位起始行,但又不重复把上一次的最末一行加入下一页, 所以,权威 ...

  4. 【刷题】洛谷 P3573 [POI2014]RAJ-Rally

    题目描述 An annual bicycle rally will soon begin in Byteburg. The bikers of Byteburg are natural long di ...

  5. PHP-从零开始使用Solr搜索引擎服务（下）

    前言: 原文地址: http://www.cnblogs.com/JimmyBright/p/7156085.html 前面在配置完成Solr服务之后,在浏览器上可以打开Solr的管理界面,这个界面几 ...

  6. BZOJ 3230 相似子串 | 后缀数组 二分 ST表

    BZOJ 3230 相似子串 题面 题解 首先我们要知道询问的两个子串的位置. 先正常跑一遍后缀数组并求出height数组. 对于每一个后缀suffix(i),考虑以i开头的子串有多少是之前没有出现过 ...

  7. Alpha 冲刺 —— 十分之七

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 学习MSI.CUDA 试运行软件并调试 ...

  8. 【Learning】分数规划

    分数规划 ​ 分数规划是一类决策性问题.一般地,题目会要求你针对问题规划一种方案,使得其代价函数最小或最大.其中,代价函数一般是分数形式,且分子分母的构成元素一般呈现一一对应关系. 直接上例题观察:B ...

  9. 【CF835D】Palindromic characteristics 加强版 解题报告

    [CF835D]Palindromic characteristics 加强版 Description 给你一个串,让你求出\(k\)阶回文子串有多少个.\(k\)从\(1\)到\(n\). \(k\ ...

  10. kafka 多线程消费

    一. 1.Kafka的消费并行度依赖Topic配置的分区数,如分区数为10,那么最多10台机器来并行消费(每台机器只能开启一个线程),或者一台机器消费(10个线程并行消费).即消费并行度和分区数一致. ...