1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             a{
  8.                 text-decoration: none;
  9.                 color: #999;
  10.             }
  11.         </style>
  12.         <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  13.         <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  14.     </head>
  15.     <body>
  16.         <div id="app">
  17.             <h1>新闻列表</h1>
  18.             <!--<div class="newItem" v-for='item in newList'>
  19.                 可以加上（item,index）获取索引值和每一项
  20.             -->
  21.             <div class="newItem" v-for='(item,index) in newList'>
  22.                 <a :href=" 'https://www.toutiao.com' + item.source_url">
  23.                 <h3>{{index+1}}、{{item.title}} </h3>
  24.                 <p>{{item.abstract}}</p>
  25.                 <img :src="item.image_url"/>
  26.                 </a>
  27.                 <hr />
  28.             </div>
  29.  
  30.         </div>
  31.  
  32.         <script type="text/javascript">
  33.             var app = new Vue({
  34.                 el:'#app',
  35.                 data:{
  36.                     newList:[]
  37.                 },
  38.                 methods:{
  39.  
  40.                 },
  41.                 mounted:function(){
  42.                     var that = this
  43.                     $.ajax({
  44.                         type:"get",
  45.                         url:"newList.json",
  46.                         async:true,
  47.                         success:function(res){
  48.                             console.log(res)
  49.                             that.newList = res.data
  50.                         }
  51.                     });
  52.                 }
  53.             })
  54.         </script>
  55.     </body>
  56. </html>

列表渲染.html的更多相关文章

  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. 先写两个组件 //登录的用户显示 ...

  10. vue学习笔记（二）- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

随机推荐

  1. Elastic Static初识(01)

    写在前面 Elastic Static 是指由Elasticsearch,Logstash,Kibana,Beats等组件结合起来而构成的一个数据收集,分析,可视化的一个架构.我们经常听说过的ELK就 ...

  2. 构建之法——homework4

    手机应用——软件腾讯QQ: QQ是腾讯公司开发的一款基于Internet的即时通信软件.最初通过在线广告进行盈利(Banner广告.Email广告等).然后通过免费注册QQ,获取大量用户.开发QQ相关 ...

  3. layui select获取自定义属性值

    layui-select写法: <option value='> 我想在点击的时候获取自定义属性data-method的值,其中selectId是该select的id form.on('s ...

  4. springboot 使用i18n进行国际化

    1.i18n介绍 i18n(其来源是英文单词 internationalization的首末字符i和n,18为中间的字符数)是“国际化”的简称.在资讯领域,国际化(i18n)指让产品(出版物,软件,硬 ...

  5. FastDfs之StorageServer的详细配置介绍

    #这个配置文件是否失效 disabled=false #false为有效 true为无效 # 本storage server所属的group名 group_name=group1 # 可以版定一个ip ...

  6. 蓝松SDK支持以下的AE特性

    蓝松短视频SDK 支持Ae模板, 您可以在PC端用AE设计好模板,然后导入到SDK中, 蓝松SDK支持一下的AE特性:1, Ae中的图片图层,任意多个图片图层, 每个图片的移动旋转缩放透明,锚点,蒙版 ...

  7. [Note] Windows 10 Python 3.6.4 安装scrapy

    直接使用pip install安装时会在安装Twisted出错,以下主要是解决Twisted的安装问题 1. 安装wheel pip install wheel 2. 安装Twisted 在Pytho ...

  8. 重学Golang系列（一）: 深入理解 interface和reflect

    前言 interface(即接口),是Go语言中一个重要的概念和知识点,而功能强大的reflect正是基于interface.本文即是对Go语言中的interface和reflect基础概念和用法的一 ...

  9. Java读源码之Thread

    前言 JDK版本:1.8 阅读了Object的源码,wait和notify方法与线程联系紧密,而且多线程已经是必备知识,那保持习惯,就从多线程的源头Thread类开始读起吧.由于该类比较长,只读重要部 ...

  10. QCustomPlot 基础

    QCutomPlot简介 官网网址及介绍 https://www.qcustomplot.com/ QCustomPlot is a Qt C++ widget for plotting and da ...