Vue.js入门 简单案例todolist

Vue入门案例 tuodolist

功能实现

• 添加代办事件
• 点击完成按钮事件状态改变
• 分别查看全部、代办、完成列表

页面css样式

主要有 事件完成的样式、按钮的样式

<style>
   .finished {
      text-decoration: line-through;
    }
    .active {
      background-color: red;
    }
</style>

页面结构

id为app的div就算vue的作用区域

  <div id="app">
      <h1>新增</h1>
      <!-- 使用v-model实现数据的实时更新，改变输入框的内容data中的value也会更新-->
      <input type="text" v-model="value" />
      <!-- 绑定一个点击事件 addAction-->
      <button @click="addAction">新增</button>
      <h1>列表</h1>
      <ul>
      <!-- item.id:每个事件的id，这个id是用时间戳进行设置的，id必须是唯一的而时间戳不肯有
      	相等的情况
      	item.status:事件状态，finished表示完成，todo表示代办-->
      	
      	<!-- 使用v-for循环遍历要显示内容的列表showList（具体请看computed），并且绑定key
      	判定是否要添加finished的类名，如果item.status=== 'finished'结果为true就加上这个类
      	表示是已完成的事件-->
        <li
          v-for="(item, index) in showList"
          :key="item.id"
          :class="{finished: item.status === 'finished'}"
        >
          <span>{{item.value}}</span>
          <!-- 完成按钮只在未完成事件上才出现所有要判定事件状态是否是未完成 -->
          <button v-if="item.status==='todo'" @click="finishAction(item.id, index)">
            完成
          </button>
        </li>
      </ul>
      <h1>操作</h1>
      <nav>
      <!-- 循环遍历按钮数组handleBtns，并绑定key
      		判定是否是当前点击的按钮，如果是就加上类名active，selected表示当前选中按钮
      		绑定点击事件changeAction
      -->
      
        <button
          v-for="item in handleBtns"
          :key="item.id"
          :class="{active: item.id === selected}"
          @click="changeAction(item.id)"
        >
          {{item.text}}
        </button>
      </nav>
    </div>

script代码

需要先引入vue.js

	//vue区域#app
	//数据：value：输入框内容、 selected：当前选中的按钮、list：事件数组 、 handleBtns：按钮数组
			
  const app = new Vue({
        el: "#app",
        data: {
          value: "",
          list: [],
          selected: "all",
          handleBtns: [
            { text: "所有", id: "all" },
            { text: "完成", id: "finished" },
            { text: "未完成", id: "todo" },
          ],
        },
        //计算属性
        computed: {
        //因为不同的按钮切换不同的显示内容，所有这个函数作用就是返回一个要显示内容的数组
          showList(){
          //如果未all那妞直接返回整个事件列表，如果显示完成或代办就对数组进行过滤
            return this.selected === 'all' ? this.list : (this.list.filter(item=>item.status === this.selected));
          }
        },
        methods: {
          // 新增
          addAction() {
          //添加事件，创建个一代办事件对象存入事件列表中
            this.list.push({
              value: this.value,
              status: "todo", //初始是代办状态
              id: new Date().getTime(),//id用时间戳记录
            });
            // 清空输入框
            this.value = "";
          },
          // 完成点击事件
          finishAction(id, index) {
            // 方法一找到第几个返回下标
            // const index = this.list.findIndex(item=>item.id===id);
            // this.list[index].status = 'finished';
			//方法二，找到第几个直接返回这个对象
            const item = this.list.find((item) => item.id === id);
            item.status = "finished";

          },
          // 点击切换数据
          changeAction(id){
          //只要更改selected的内容就能带动所用的数据进行跟新
            this.selected = id;
          }
        },
      });

案例实现效果

• 显示所有事件
  
• 点击完成按钮，事件状态改变
  
• 查看完成事件
  
• 查看代办事件