1

2

　　　　

3

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

function isBigEnough(element) {

  return element >= 10;

}

var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);

// filtered is [12, 130, 44]

        <div v-for="comment in filteredList" class="ui comments">
              computed:{

                loadingOrNot:function (){

                  if (this.comments.length == 0){

                    return " loading"

                  } else {

                    return ""

                  }

                },

                filteredList:function (){

                  function useRuler(people) {

                      return people.height >= 100;

                    }

                    var nweList = this.comments.filter(useRuler);

                    return nweList

                }

              },

4

<!DOCTYPE html>

{% load staticfiles%}

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

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

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

        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

        <link rel="stylesheet" href="css/animate.css" media="screen" title="no title" charset="utf-8">

        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">

    </head>

    <body id="app">

      <style type="text/css">

          .ui.segment.container {

              width:700px;

          }

          p {

              font-family: 'Raleway', sans-serif;

              font-size:{{ article.fontSize }}px;

          }

          body {

              background:url(images/star_banner.jpg);

              background-size:cover;

              background-repeat:no-repeat;

              background-attachment:fixed

          }

      </style>

      <div class="ui dimmer fadeIn active" v-if="!modal.show" v-on:click="modal.show = !modal.show">

          <div class="ui modal active">

            <h3 class="ui header">This is a HEader</h3>

          </div>

      </div>

        <div class="ui  segment padded container" >

          <button v-on:click="article.fontSize+=5" class="ui top left attached label" type="button" name="button">+</button>

            <h1 class="ui header" style="font-family:'Oswald', sans-serif;font-size:40px">

                {{ article.title }}

                {{ article.fontSize }}

            </h1>

            <p>

               {{ article.content }}

            </p>

            <button v-on:click="modalSwitch" class="ui inverted blue button" type="button" name="button">

              出现弹窗</button>

        </div>

        <!-- Comments&Form's here -->

        <div class="ui segment {{ loadingOrNot }} container" style="width:700px;">

            <h3 class="ui header" style="font-family:'Oswald', sans-serif;">Comments</h3>

            <div v-for="comment in filteredList" class="ui comments">

                <div  class="comment" >

                    <div class="avatar">

                        <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />

                    </div>

                    <div class="content">

                        <a href="#" class="author">{{ comment.name}}</a>

                        <div class="metadata">

                            <div class="date">2 days ago</div>

                        </div>

                        <p class="text" style="font-family: 'Raleway', sans-serif;">

                            我的身高是：{{ comment.height   }}cm

                        </p>

                    </div>

                </div>

            </div>

            <div class="ui divider"></div>

            <h3 class="ui header"> 你还可以输入{{ 200 - message.length }}字</h3>

            <form class="ui form" action="" method="post">

                <input  v-model="message" type="text" >

            </form>

        </div>

        <script>

          var vm = new Vue({

              el:"#app",

              //context

              data:{

                modal:{

                  show:true,

                },

                //context["articlke"] = article

                article:{

                  title:"THis is a title",

                  content:"Hi there",

                  fontSize:18,

                },

                comments:[

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                  // {name:"alex",said:"Great!",show:true},

                ]

              },

              methods:{

                modalSwitch:function (){

                  this.modal.show = !this.modal.show

                },

                getData:function (){

                  var self = this;

                  reqwest({

                    url:"https://swapi.co/api/people/?format=json",

                    type:"json",

                    method:"get",

                    data:{tag:"life"},

                    success:function (resp){

                        self.comments = resp.results

                      }

                  })

                }

              },

              computed:{

                loadingOrNot:function (){

                  if (this.comments.length == 0){

                    return " loading"

                  } else {

                    return ""

                  }

                },

                filteredList:function (){

                  function useRuler(people) {

                      return people.height >= 100;

                    }

                    var nweList = this.comments.filter(useRuler);

                    return nweList

                }

              },

              ready:function (){

                this.getData()

              }

          })

        </script>

    </body>

</html>

5

5

6

7

7 Vue.js实现loading1的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  4. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  5. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  6. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  7. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  8. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. form中的action与<url-pattern>的理解

    一.<form action="Test/Login" method="post"> 在action中有两种表示方式: 1."/Test/ ...

  2. mongoDB基础知识(一)

    mongoDB是一个基于分布式文件存储的数据库,介于关系型数据库和非关系型数据库之间,在非关系型数据库中功能最丰富, 最像关系型数据库.数据结构松散,类似于json的bson格式,可以存储比较复杂的数 ...

  3. PHP：substr和mb_substr的区别

    substr和mb_substr函数都是获取字符串中的某个部分 那么,它们的区别在哪儿呢? 区别: substr :全部是英语.数字就正常:但有一些的字元是占用多个位元的,substr()就得不到你预 ...

  4. April 13 2017 Week 15 Thursday

    Happiness takes no account of time. 幸福不觉光阴过. Do you know the theory of relativity? If you know about ...

  5. 使用Excel调用ABAP系统的函数

    效果:在excel里创建一个按钮,开发一些VB script,可以连接指定的ABAP系统并执行系统里的ABAP function module. 在这里例子里执行ABAP系统的函数TH_USER_LI ...

  6. C++学习之继承中的成员访问控制

    由基类到派生类的过程中,在派生类里如何访问基类成员,以及派生类对象如何访问基类成员,是根据派生类在从基类派生时是以什么方式进行的派生:public.protect或者private.下面说一下在这三种 ...

  7. IOS Get请求（请求服务器）

    @interface HMViewController () <NSURLConnectionDataDelegate> @property (weak, nonatomic) IBOut ...

  8. 贪心，二叉树搜索，ZOJ(2315)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1315 解题报告: #include <stdio.h> ...

  9. cnn为什么会不存在vanishing gradient的问题

    之前神经网络火过一段时间,但是后来又淡出了,后来又火了,尤其是到2012年真的像发水一样. 之前为什么不火了呢,因为人们发现网络浅了吧,没什么优势.网络深了吧,又会出现vanishing gradie ...

  10. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...