VUE实现todolist

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script src="https://unpkg.com/vue@3"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>

</head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const useInputEffect = ()=>{
        const{ref}=Vue;
        const inputValue = ref("111");
        const handleInputChange = (newValue) => {
          inputValue.value = newValue;
        };
        return {
            inputValue,
            handleInputChange,
        }
    }

    const useListEffect=()=>{
        let itemId=0;
        const{reactive,toRefs}=Vue;
        // const list = reactive([{content:"vue3"},{content:"yingyu"},{content:"shujujiegou"}]);
        let listObj = reactive({list:[]});
        let {list} = toRefs(listObj);
        let multiSelection = reactive([]);
        const addItemToList = (item)=>{
            listObj.list.push({ id:++itemId,content: item.value }); 
            item.value="";
        }
        const handlSelectionChange = (val)=>{
          multiSelection=val;
        }
        const handleDelete = ()=>{
          let list = listObj.list;
          if(multiSelection.length===0){
              alert("未选择");
              return;
          }
          multiSelection.forEach((selectedItem) => {
            list = list.filter((listItem)=>listItem.id!=selectedItem.id);
          });
          listObj.list = list;
        }
        return {
          list,
          addItemToList,
          handlSelectionChange,
          handleDelete,
          handlSelectionChange,
        };
    }

    const app = Vue.createApp({
      setup() {
        const{inputValue,handleInputChange}=useInputEffect();
        const{list,
          addItemToList,
          handlSelectionChange,
          handleDelete,
        }=useListEffect();
        const handleSubmit=()=>{
            addItemToList(inputValue)
        }
        return {
          inputValue,
          handleInputChange,
          handleSubmit,
          list,
          addItemToList,
          handlSelectionChange,
          handleDelete,
        };
      },
      template: `
        <div>
          <div>
              <el-input style="width:300px" :modelValue="inputValue" @input="handleInputChange"></el-input>
              <el-button @click="handleSubmit">提交</el-button>
          </div>
          <el-table
              border
              :data="list"
              @selection-change="handlSelectionChange"
              style="width: 200px;">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="content"
                label="待办事项"
                width="199">
              </el-table-column>
            </el-table>
             <el-button @click="handleDelete">删除</el-button>
        </div>
      `,
    });
    
    app.use(ElementPlus);
    const vm = app.mount("#root");
  </script>
</html>
相关推荐
SYKMI26 分钟前
@JsonFormat时区问题
java·前端·数据库
海盐泡泡龟2 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder4 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder4 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars4 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾5 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
苹果酱05675 小时前
Java设计模式:探索编程背后的哲学
java·vue.js·spring boot·mysql·课程设计
Oscar_02086 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡6 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder6 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3