vue.js实例todoList项目


Posted in Javascript onJuly 07, 2017

新建组件todoList.vue,在App.vue中引入

import TodoList from "./components/todoList";
export default {
 name: 'app',
 components: {
  TodoList
 }
}
<template>
 <div id="app">
  <h1>TO DO LIST !</h1>
  <todo-list></todo-list>
 </div>
</template>

 三处缺一不可,第一处引入文件,第二处注册组件,第三处声明组件位置

由于html中不区分大小写,所以驼峰命名方式中的大写变为-,即第三处中写成todo-list,不理解的可以动手实验一下!

todoList.vue中data如下:

data () {
   return{
     items:[
      {
        label:"homework",
        finish:false
      },
      {
        label:"run",
        finish:false
      },
      {
        label:"drink water",
        finish:false
      }
     ]
   }
 }

 有三件事情:homework、run、drink water,通过v-for渲染:

<ul>
  <li v-for="item in items">{{item.label}}</li>
</ul>

列表展示完成,现在添加点击列表,改变列表样式,标记为完成!

<ul>
  <li v-for="item in items" v-on:click="done(item)" v-bind:class="{done:item.finish}">{{item.label}}</li>
</ul>

添加v-on:click,v-bind:class

v-on:click=”done(item)”表示点击执行done方法,item作为参数。

v-bind:class=”{done:item.finish}”表示,如果item.finish==true时,class=“done”。

methods:{
  done:function (item) {
    item.finish = !item.finish
  }
 }
.done{
  color: red;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
webpack实用小功能介绍
Jan 02 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
Angular.js自动化测试之protractor详解
Jul 07 #Javascript
vue.js全局API之nextTick全面解析
Jul 07 #Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
详谈js模块化规范
Jul 07 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python pandas用法最全整理
2019/08/04 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
乡镇庆八一活动方案
2014/02/02 职场文书
学习方法演讲稿
2014/05/10 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书