vue.js 2.0开发(2)
如果我们想实时的显示我们todos的长度这个业务逻辑可以这样：
<h1>{{message}} ({{todos.length}})</h1>
直接展示todos的length属性，这种可读性不好我们希望以一个变量来展示todos的长度，这就可以使用我们的 computed，js代码：
new Vue({
el:'#app',
data:{
message:'hello world',
todos:[
{id:1,title:"learn vuejs"},
],
newTodo:{id:null,title:""}//定义一个obj
},
computed:{
todoCount(){
return this.todos.length;
}
},
methods:{
addTodo(newTodo){//es6
this.todos.push(newTodo);//把新的obj添加在数组中，
this.newTodo = {id:null,title:""}//初始化newTodo
},
deleteTodo(index){
this.todos.splice(index,1);//删除下标为index的元素
}
}
});
页面中：
<h1>{{message}} ({{todoCount}})</h1>
这样也是可以的，这样主要用于我们在页面当中展示的一些数据可能需要一些处理之后才可以使用。 v-bind：class 设置我们的class，对于我们改变样式是非常有帮助的，比如我们要判断我们的todo item是否是一个完成的状态。
首先我们在我们的todos里面的newTodo中添加一个completed：false，然后使用我们的v-bind：class
<li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
这里就是说如果我们的todo.completed为真就给我们的这个li添加一个class名“completed”，在后面添加一个按钮来控制是否完成。
<button class="btn btn-warning btn-xs pull-right" v-on:click="toggleCompletion(todo)">Complete</button>
当然还要把我们的方法写上，功能就是点击把completed变为相反的状态：
toggleCompletion(todo){
todo.completed = !todo.completed;
}
还可以把点击的时候将按钮本省的样式改变 也是用v-bind:class，用另一种形式来写 也就是我们的三目运算符：
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
整个的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2.0</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<style type="text/css">
.completed{
color: green;
font-style: italic;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container" id="app">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">welcome Vue 2.0</div>
<div class="panel-body">
<input type="text" name="" v-model="message" class="form-control">
<h1>{{message}} ({{todoCount}})</h1>
<ul class="list-group">
<li class="list-group-item" v-for="(todo,index) in todos" v-bind:class="{'completed' : todo.completed}">
{{todo.title}}
<button class="btn btn-warning btn-xs pull-right" v-on:click="deleteTodo(index)">Delete</button>
<button class="btn btn-xs pull-right" v-on:click="toggleCompletion(todo)" v-bind:class="[todo.completed ? 'btn-success' : 'btn-danger']">{{todo.completed ? 'completed' : 'working'}}</button>
</li>
</ul>
<form v-on:submit.prevent="addTodo(newTodo)">
<div class="form-group">
<input type="text" name="" class="form-gcontrol" placeholder="add a new todo" v-model="newTodo.title">
</div>
<div class="from-group">
<button class="btn btn-success" type="submit">add todo</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world',
todos:[
{id:1,title:"learn vuejs",completed:false},
],
newTodo:{id:null,title:"",completed:false}//定义一个obj
},
computed:{
todoCount(){
return this.todos.length;
}
},
methods:{
addTodo(newTodo){//es6
this.todos.push(newTodo);//把新的obj添加在数组中，
this.newTodo = {id:null,title:"",completed:false}//初始化newTodo
},
deleteTodo(index){
this.todos.splice(index,1);//删除下标为index的元素
},
toggleCompletion(todo){
todo.completed = !todo.completed;
}
}
});
</script>
</body>
</html>
vue.js 2.0开发(2)的更多相关文章
- vue.js 2.0开发(3)
组件化 Vue.component('todo-items',{ }); 定义组件,首先是标签的名字todo-items,然后里面还要配置一些选项,首先是我们的模板template,里面需要填入的内容 ...
- vue.js 2.0开发
创建一个工程文件: css中引用的是bootstrap的css,js中就是vue,index页面: <!DOCTYPE html> <html> <head> &l ...
- vue.js 2.0开发(4)
使用vue-cli,首先安装: npm install -g vue-cli 安装完了执行vue命令,会出现 vue init <template-name> <project-na ...
- 窥探Vue.js 2.0
title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 更轻更快的Vue.js 2.0与其他框架对比(转)
更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0 ...
- 【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
- 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
随机推荐
- css3 TransformZ() 3D缩放
transformZ()函数做了一个在Z轴移动的工作,3D空间中,Z轴垂直于x-y所在平面-也就是界面所在的平面,而我们的视角正好垂直于xy平面,所以进行transformZ() 3D缩放,其实在我们 ...
- 使用qmake构建程序（有关.pro和.vcproj编译选项对应关系）
houjinxin 为了方便统一构建,准备使用qmake构建所有的vc工程,无论是否使用了Qt库,可是在网上找了几天,有几个选项根本就不知道怎么在pro里面配置,才能生成预期的vcproj文件... ...
- javaEE-----org.springframework.dao.InvalidDataAccessApiUsageException: Write operation
org.springframework.dao.InvalidDataAccessApiUsageException: Write operations are not allowed in read ...
- 配置自己的OpenGL库，glew、freeglut库编译，库冲突解决（附OpenGL Demo程序）
平台:Windows7,Visual C++ 2010 1. 引言 实验室的一个项目,用到OpenGL进行实时绘制,还用到一些其他的库,一个困扰我很久的问题就是编译时遇到的各种符号未定义,符号重定义之 ...
- commonJS
摘自阮一峰博客:http://javascript.ruanyifeng.com/nodejs/module.html 目录 概述 module对象 module.exports属性 exports变 ...
- linux 系统性能分析
CPU篇 top 1时,看各个cpu是否均衡:看每个cpu的使用率分布是否合理 看load average的负载( 1分钟.5分钟.15分钟前到现在的平均值) 看内存的使用 看进程数运行.休眠数 M看 ...
- MyFirstgame 拼图
package auto; /** * IDA*求解15puzzle问题 * IDA*整合了IDDFS和A*算法.其中IDDFS控制了求解过程中的内存开销,A*算法意味着"启发式" ...
- 0x00linux32位汇编初入--前期准备
0x00汇编初入--前期准备 一.汇编工具 在linux平台下常用的编译器为as,连接器为ld,使用的文本编辑器为vim,汇编语法为att 以下是一些工具: addr2line 把地址转换为文件名和行 ...
- 线程安全及Python中的GIL
线程安全及Python中的GIL 本博客所有内容采用 Creative Commons Licenses 许可使用. 引用本内容时,请保留 朱涛, 出处 ,并且 非商业 . 点击 订阅 来订阅本博客. ...
- 安卓，支付宝app登录时，提示 服务器安全证书已过期或不可信任，请问怎么解决
安卓,支付宝app登录时,提示 服务器安全证书已过期或不可信任,请问怎么解决 请把手机时间调成当前时间.