代办事项，比较完整的例子

最新推荐文章于 2023-02-19 09:00:31 发布

xqiitan

最新推荐文章于 2023-02-19 09:00:31 发布

阅读量1.5k

点赞数 1

分类专栏： VUE

本文链接：https://blog.csdn.net/xqiitan/article/details/90377126

版权

VUE 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo代办事项520</title>
    <style>
      li.done{
        text-decoration: line-through;
        color:red;
        font-weight: bold;
        text-shadow: 1px 0px 0px yellow;
      }
    </style>
  </head>
  <body>
    <!--对应js中的app-->
    <div id="app">
      <!--变量渲染-->
      <p>{{title}}</p>
      <!--条件渲染true显示，false不显示-->
      <p v-if="showSub">{{subTitle}}</p>
      <div>
        <!--响应按Enter键加入事件-->
        <input @keyup.enter="handleClick" type="text" v-model="mytodo">
        <!--处理点击事件【添加】-->
        <button @click="handleClick">添加</button>
        <button @click="reset">清空已完成</button>
      </div>
      <!-- v-for循环列表显示-->
      <ul>
        <!--<li :style="{'text-decoration':todo.done?'line-through':''}"
        @click='toggle(index)' v-for='(todo, index) in todos'>{{index+1}}: {{todo.text}}</li>-->
        <!--根据done的值，设置class的值-->
        <li :class="{'done':todo.done}" @click='toggle(index)'
            v-for='(todo, index) in todos'>{{index+1}}: {{todo.text}}</li>
      </ul>
      <p>{{remain}}/{{todos.length}}</p>
    </div>
  </body>
</html>

main.js

import Vue from 'vue'
Vue.config.productionTip = false

new Vue({
  /* 找到id为app的容器 */
  el: '#app',
  data: {
    title: 'Vue Todo List',
    subTitle: 'VUE Base 01',
    showSub: false,
    mytodo: '',
    todos: [
      {text: '吃饭', done: false},
      {text: '睡觉', done: true},
      {text: '打豆豆', done: false}
    ]
  },
  // 新定义一个字段 remain
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    // 点击添加事件响应(添加元素，清空输入框)
    handleClick () {
      this.todos.push({text: this.mytodo, done: false})
      this.mytodo = ''
    },
    toggle (i) {
      // 切换状态
      this.todos[i].done = !this.todos[i].done
    },
    reset () {
      // 已完成的过滤掉
      this.todos = this.todos.filter(v => !v.done)
    }
  }
})

xqiitan

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
代办事项，比较完整的例子

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-d...
复制链接

扫一扫