在输入框内输入一个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. Mysql索引为什么用B+树而不用B-树

    先从数据结构的角度来看 我们知道B-树和B+树最重要的一个区别就是B+树只有叶节点存放数据,其余节点用来索引,而B-树是每个索引节点都会有Data域. 这就决定了B+树更适合用来存储外部数据,也就是所 ...

  2. python tkinter-菜单栏

      菜单栏 Menu f = tkinter.Menu(root) root['menu']=f f.add_command(label='菜单')# f.add_command(label='关于' ...

  3. PyQt5安装及ModuleNotFoundError: No module named 'PyQt5'问题解决

    PyQt5安装及ModuleNotFoundError: No module named 'PyQt5'问题解决     安装pyQt5费了很多的周折,不过现在还是安装好了,现在重新梳理一下整个安装过 ...

  4. unbuntu 18.04 LTS 版 安装Samba服务器

      首先需要注意的是,此时服务器的版本是乌班图18.04 LTS Server ,安装配置Samba服务器 . 首先来对当前的软件进行更新. 1 sudo apt-get upgrade 2 sudo ...

  5. python爬虫学习(一)：BeautifulSoup库基础及一般元素提取方法

    最近在看爬虫相关的东西,一方面是兴趣,另一方面也是借学习爬虫练习python的使用,推荐一个很好的入门教程:中国大学MOOC的<python网络爬虫与信息提取>,是由北京理工的副教授嵩天老 ...

  6. mysql 用户/密码/权限操作

    由于最近使用mysql遇到了修改用户密码的问题,所以一块学习了一下关于用户的相关操作: 1. 创建新账户 CREATE USER 'jeffrey'@'localhost'; 2. 账户设置密码 #当 ...

  7. Android Firebase Android google-cloud-tools

    Firebase 让不懂服务端的开发者也可以快速写出实时性的Web端和移动端应用. firebase的功能包括推送通知,云存储,活动监视,远程部署 针对国内三方推送,只能在国内使用,到了国外就不支持了 ...

  8. 51Nod.1244.莫比乌斯函数之和(杜教筛)

    题目链接 map: //杜教筛 #include<map> #include<cstdio> typedef long long LL; const int N=5e6; in ...

  9. [HDU5361]In Touch

    [HDU5361]In Touch 题目大意: 有\(n(n\le2\times10^5)\)个点,每个点有三个属性\(l_i,r_i,c_i\).表示若\(|i-j|\in[l_i,r_i]\),\ ...

  10. JVM内存管理--GC算法详解

    标记/清除算法 首先,我们回想一下上一章提到的根搜索算法,它可以解决我们应该回收哪些对象的问题,但是它显然还不能承担垃圾搜集的重任,因为我们在程序(程序也就是指我们运行在JVM上的JAVA程序)运行期 ...