vue记事本

最新推荐文章于 2025-06-10 09:55:39 发布

oo_ring

最新推荐文章于 2025-06-10 09:55:39 发布

阅读量463

点赞数

CC 4.0 BY-SA版权

文章标签： css html html5 vue.js

本文链接：https://blog.youkuaiyun.com/oo_ring/article/details/120599400

本文介绍了如何使用Vue.js和Vuex创建一个简单的记事本应用。内容包括在Vuex中定义存储数据的数组和操作方法，以及在页面中调用这些方法。同时，文章提到了一个重要细节，即在输入为空时禁用回车添加功能，防止无效数据的添加。

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

深夜码字！

效果：

点击回车添加内容

1.在vuex创建一个数组存放数据，以及点击添加/删除的方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[]
  },
  mutations: {
  	//添加数据
    setAdd(state,data){
      state.list.push(data)
    },
    //删除数据
    setDelete(state,index){
      state.list.splice(index,1)
    },
    //数据
    allall(state){
      state.list=[]
    }
  },
  actions: {
  },
  modules: {
  }
})

样式

<template>
  <div>
    <h1>todos</h1>
    <div class="home">
      <div class="h-head">
        <div class="arrow" @click="qx"></div>
        <input text="text" v-model="input" placeholder="What needs to be done?" @keydown.enter="add">
      </div>
      <div class="h-body">
        <ul class="todo-list">
					<li class="todo" :class="{'completed':item.state}" v-for="item,index in showList" :key="index">
						<div class="view">
							<!-- 通过多选框 改变 finished的状态 -->
							<input class="toggle" type="checkbox" v-model="item.state"/>
							<!-- 当点击文字时 实现反选 -->
							<label @click="item.state==!item.state">{
  {item.title}}---{
  {item.state}}</label>
							<button class="destroy" &#

最低0.47元/天解锁文章