7 Vue.js实现loading1
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的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- vue.js学习笔记
有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- vue.js几行实现的简单的todo list
序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...
- Vue.js——60分钟组件快速入门（上篇）
组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
随机推荐
- Simotion应用案例，使用Simotion web server调试，使用Project Generator创建项目，Simosim模拟运行运行项目
Simotion web server simotion项目设计和调试过程中,web server功能越来越常用.例如Project generator生成的FBAxis, winder, print ...
- 【LOJ6043】「雅礼集训 2017 Day7」蛐蛐国的修墙方案（搜索技巧题）
点此看题面 大致题意: 给你一个长度为\(n\)的排列\(p\),要求构造一个合法的括号序列,使得如果第\(i\)个位置是左括号,则第\(p_i\)个位置一定是右括号. 暴搜 很容易想出一个暴搜. 即 ...
- EF 状态版 增删改
1.利用 状态版 实现 增加 . 2.利用状态版 进行 删除 3. 利用状态版 实现 修改 ,修改 方法 有3种 第1种修改方法 第2种修改 方法 第3种修改方法
- 分类算法简介 基于R
最近的关键字:分类算法,outlier detection, machine learning 简介: 此文将 k-means,decision tree,random forest,SVM(supp ...
- ROS机器人程序设计
在<ROS机器人程序设计>中,在第二章创建节点时给出一个接收和发送的例子,但是按照书中步骤编译时,遇到按个三个问题,现在罗列出来解决方案供参考. 建议在工作空间直接输入 catkin_ ...
- 第十五章 函数————函数的递归、生成器send 、匿名函数
1.生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__next__()方法,生成器接着往下指向,返回下一个yield值并停止 例: persons=[ ...
- 数据库可视化工具简介以及pymysql的使用
1.可视化工具Navicat 我们自己开发测试时,可以使用该可视化工具,以图形界面的形式操作数据库 在生产环境中,为了显示自己的逼格,一般不建议使用它 官网下载:https://www.navicat ...
- 一句话说明==和equals的区别
public class equals { public static void main(String[] args) { int x=10; int y=10; String str1=new S ...
- JSON格式自动解析遇到的调用方法问题.fromJson() ..readValue()
所使用的API Store是 聚合数据 使用 手机归属地查询 功能 因百度的apistore.baidu.com 2016年12月开始至今天不接受新用户调取.聚合数据一个接口免费. 一.通过谷歌的go ...
- 总结JavaScript常用数组操作方法，包含ES6方法
一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...