在输入框内输入一个list，回车，添加到list列表中，点击列表中的项样式改变

1、index.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>my-first-vue-project</title>

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

2、main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  template: '<App/>',

  components: { App }

})

3、App.vue

<template>

  <div id="app">

    <h1>{{title}}</h1>

    <h1 v-text="title"></h1>

    <h1 v-html="title"></h1>

    <input type="text" v-model="newItem" v-on:keyup.enter="addNew">

    <ul>

        <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">

        {{item.label}}

        </li>

    </ul>

  </div>

</template>

<script>

export default {

   data () {

    return {

      title: '<span>?</span>this is a todolist',

      items:[

          {

            label:'coding',

            isFinished:false

          },

          {

            label:'walking',

            isFinished:true

          }

      ],

      newItem:''

    }

  },

  methods:{

    toggleFinish:function(item){

      // console.log(item);

      item.isFinished=!item.isFinished;

    },

    addNew:function(){

      // this.newItem;

      // console.log(this.newItem);

      this.items.push({

        label:this.newItem,

        isFinished:false

      })

      this.newItem='';

    }

  }

}

</script>

<style>

.finished{

  text-decoration:underline;

}

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

使用vuejs做一个todolist的更多相关文章

  1. 用vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...

  2. 用VUEJS做一个网易云音乐

    前言:自己学习VUEJS也一段时间,但一直没有做出来一东西.我自己一直喜欢用网易云音乐app,于是乎就做了这个app. 项目截图 技术栈 vue全家桶 (vue vue-router vuex) ax ...

  3. 用VUEJS做一个猫眼电影web app

    之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...

  4. express+mongoDB（mLab）做一个todolist小项目

    这是在网课上学习的,先建立一个express-todolist文件夹作为项目跟目录 另外,我们直接把项目上用到的css文件和js文件下载下来放在项目里 这里直接贴出来 先建立一个public文件夹,放 ...

  5. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  6. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  7. QML学习笔记（五）— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...

  8. 【移动端debug-6】如何做一个App里的web调试小工具

    原文链接:如何做一个App里的web调试小工具 我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的.相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌 ...

  9. 【技巧】使用weeman来做一个钓鱼网页

    本文来自网友836834283 对玄魂工作室的投稿. 工具项目地址:https://github.com/Hypsurus/weeman/ 克隆地址:https://github.com/Hypsur ...

随机推荐

  1. Unity 之 自定义消息提示框

    简单版: http://blog.csdn.net/caoshuangxiaodouya/article/details/46550655 复杂版: http://www.tuicool.com/ar ...

  2. 用VScode来编写C / C ++代码

    Microsoft C / C ++扩展提供了对Visual Studio Code的C / C ++支持,以便在Windows,Linux和macOS上使用VS Code实现跨平台C和C ++开发. ...

  3. hdu3047 Zjnu Stadium【带权并查集】

    <题目链接> <转载于 >>> > 题目大意: 有n个人坐在zjnu体育馆里面,然后给出m个他们之间的距离, A B X, 代表B的座位比A多X. 然后求出这 ...

  4. 由自定义事件到vue数据响应

    前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...

  5. 14，EasyNetQ-使用EasyNetQ.Hosepipe重新提交错误消息

    EasyNetQ队列管理实用程序. 用它从队列中抓取消息并重新发布. 还可以用它来检查错误队列消息并重试它们. 1,用法: EasyNetQ.Hosepipe.exe <command> ...

  6. HDU.1536.S-Nim(博弈论 Nim)

    题目链接 \(Description\) 给定一个集合S,每次只能拿S中某个元素个数的石子.每组数据有多组询问,询问给出m堆石子个数,问先手是否必胜.有多组数据. 1. 首先对操作数组排个序,再预处理 ...

  7. 95. 不同的二叉搜索树 II

    95. 不同的二叉搜索树 II 题意 给定一个整数 n,生成所有由 1 ... n 为节点所组成的二叉搜索树. 解题思路 这道题目是基于不同的二叉搜索树进行改进的: 对于连续整数序列[left, ri ...

  8. C# 不同类型对象同名属性赋值

    /// <summary> /// 不同类型对象同名属性赋值 /// </summary> /// <typeparam name="S">源类 ...

  9. 什么是less?

    什么是less? 简单的说,你可以在你的css文件中使用变量.函数等方式来编写你的css. less具有哪些功能? 混入(Mixins)——class中的class: 参数混入——可以传递参数的cla ...

  10. android: LayoutInflater使用

    1. 题外话 相信大家对LayoutInflate都不陌生,特别在ListView的Adapter的getView方法中基本都会出现,使用inflate方法去加载一个布局,用于ListView的每个I ...