Vue完成、未完成添加转换（Vue评论的删除添加）

灬日落

已于 2022-03-24 08:47:23 修改

阅读量329

点赞数

文章标签： vue

于 2022-03-22 20:17:20 首次发布

本文链接：https://blog.csdn.net/weixin_57661986/article/details/123670286

版权

本文介绍如何在Vue项目中实现评论的添加与删除功能，包括点击添加新评论、显示未完成评论以及完成评论的转换逻辑，通过实例详细解析Vue组件的状态管理和事件处理。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model='g'>
        <button @click='app'>添加</button>
        <div>
            <p>待完成</p>
            <ul>
                <li v-for='item in msg'>
                    <span>{
  {item}}</span>
                    <button @click='hb(item)'>完成</button>
                </li>
            </ul>
        </div>
        <div>
            <p>已完