vue 简单案例 todolist

最新推荐文章于 2024-08-31 10:56:24 发布

Syyyyy_

最新推荐文章于 2024-08-31 10:56:24 发布

阅读量334

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43859703/article/details/88693674

版权

本文通过一个简单的 Vue.js TodoList 案例，介绍 Vue 的核心特性，包括数据绑定、指令使用、组件化等，帮助初学者快速上手 Vue 开发。

摘要由CSDN通过智能技术生成

<template>
  <div id="app">
  <div class="title">
    <span class="text">TODOList</span>
    <input placeholder="请输入..." type="text" class="txtbox" @keydown="addList">
  </div>

  <div>
    <p class="notdo">未录入名单</p>
    <ul>
        <li  v-if="!res.ckof"  v-for="(res,index) in list":key="index">
        <input type="checkbox" @click="checkof(index)":checked="res.ckof" > {
  {res.name}}-----<button @click="cancel(index)">x</button>
      </li>
    </ul>
    
    <p class="cando">已录入名单</p>
    <ul>
       <li v-if="res.ckof" v-for="(res,index) in list":key="index">
       <input type="checkbox" &#