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. Java-JDBC.mysql 工具类 读取本地文件配置

    引用 mysql-connector-jav 的jar 配置文件为  database.propertties .  格式如下 driverClass=com.mysql.jdbc.Driver ur ...

  2. sklearn-特征工程之特征选择

    title: sklearn-特征工程之特征选择 date: 2016-11-25 22:49:24 categories: skearn tags: sklearn --- 抄袭/参考资料 使用sk ...

  3. linux 进程guanl管理的常用几个命令

    执行中的程序在称作进程.当程序以可执行文件存放在存储中,并且运行的时候,每个进程会被动态得分配系统资源.内存.安全属性和与之相关的状态.可以有多个进程关联到同一个程序,并同时执行不会互相干扰.操作系统 ...

  4. jenkins自动部署windwos服务器

    jenkins 持续构建windows 项目 需求说明 公司新购windwos服务器,并配置了堡垒机,由于经常要提交代码进行更新,导致手动部署很是麻烦,故采用公司jenkins实行持续构建 jenki ...

  5. P4645 [COCI2006-2007 Contest#3] BICIKLI

    题意翻译 给定一个有向图,n个点,m条边.请问,1号点到2号点有多少条路径?如果有无限多条,输出inf,如果有限,输出答案模10^9的余数. 两点之间可能有重边,需要看成是不同的路径. 题目描述 A ...

  6. Musical Theme POJ - 1743（后缀数组+二分）

    求不可重叠最长重复子串 对于height[i]定义为sa[i]和 sa[i-1]的最长公共前缀 这个最长公共前缀的值肯定是最大的 证明: 设rank[j] < rank[k], 则不难证明后缀j ...

  7. Android L开发指南

    导语:Android下一代操作系统“ L”对开发者意味着什么?ART模式能否让应用的体验超越苹果? 刚刚结束的 Google I/O大会上,Android下一代操作系统“ L”带来不少惊喜.新系统运行 ...

  8. 解题：USACO13FEB Taxi

    题面 因为每次只能载一头牛,所以总路程=每头牛的距离+回头路的最短距离,于是问题变成了如何求回头路的最短距离 我们可以把起点和终点存在两个数组里,然后将两个数组排序后取对应位置相减的绝对值就是每次走回 ...

  9. 菜鸟合作伙伴日志接入规范之C#实现

    由于行业的业务功能需要,需要与菜鸟对接登录日志,将我们系统的用户登录信息提交给菜鸟,菜鸟分析通过分析日志,检查存在的一些安全问题.根据菜鸟提供的标准,实现了C#的接入,下面分享给大家,让需要的朋友少走 ...

  10. 【贪心】【CF1061D】 TV Shows

    Description 给定 \(n\) 个电视节目和两个参数 \(x,y\).你想要看全部的电视节目,但是同一个电视机同一个时刻只能播放一个电视节目,所以你只能多租赁电视机.在时间 \([l,r]\ ...