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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
微信小程序实现简单购物车功能
Dec 30 Javascript
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
微信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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python读写二进制文件的方法
2015/05/09 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
python 容器总结整理
2017/04/04 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
好的自荐信包括什么内容
2013/11/07 职场文书
爱心捐书活动总结
2014/07/05 职场文书
党员个人公开承诺书
2014/08/29 职场文书
护理专业自我评价
2015/03/11 职场文书
出国留学英文自荐信
2015/03/25 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
springboot+rabbitmq实现智能家居实例详解
2022/07/23 Java/Android