VueJS2 todoList Demo

本文介绍了一个基于VueJS2.0的Todo List实战项目,通过sublime和vue-cli搭建开发环境,并详细展示了app.vue文件的具体代码实现,包括DOM绑定、事件监听等关键操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VueJS2 todoList Demo

最近在学习VueJS,先看2.0的API,目前看完了基础部分,搭建Demo练习一下

工具:
sublime, vue-cli
环境:
按教程,通过cnpm安装;
app.vue代码如下:

<template>
  <div id="app">
    <h1 v-text="title"></h1>
    <input type="text" v-model="input"
    @keyup.enter="addNewItem(input)">
    <ul>
      <li v-for="item in items" 
      class="need2do"
      @click="toggleDone(item)" 
      :class="[{done: item.isDone}]">{{item.label}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      title: 'This is a todoList Demo',
      input: '',
      items: []
    }
  },
  methods: {
    toggleDone: function (item) {
      item.isDone = !item.isDone
    },
    addNewItem: function (input) {
      this.items.push(
        {
          label: input,
          isDone: false
        }
      )
      this.input = ''
    }
  }
}
</script>

<style>
.need2do {
  color: blue;
}
.done {
  color: black;
  text-decoration:line-through;
}
#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>

需要注意的地方:
1.空格严格缩进;
2.不能有注释啊,好坑;
3.不能打分号;
4.CSS ttext-decoration: blink 样式 在Mac chrome 失效 ,原因尚不明确;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值