Vue基础小练习--待办事项（考察v-model的理解程度）

最新推荐文章于 2024-08-25 23:28:02 发布

陌依依

最新推荐文章于 2024-08-25 23:28:02 发布

阅读量289

点赞数

分类专栏： web前端开发文章标签： javascript vue.js 前端开发语言

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127932722

版权

本文介绍了一个使用Vue.js实现的待办事项应用。通过增加和删除操作，动态管理待办事项列表。利用v-model双向绑定输入框，v-show控制提示信息的显示与隐藏，展示了Vue.js的基本用法。

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

思路：

增加代办事项就是增加list数组的长度，新增内容；
删除待办事项就是减少list属性长度，删除数组里的内容；
<li>标签要循环遍历list数组内容；

代码：

<body>
    <div id="box">
        <input type="text" v-model="mytext">
        <button @click="handleAdd()">add</button>
        
        <ul v-show="list.length">
            <li v-for="(item,index) in list">
                {
  {item}}
                <button @click="handleDel(index)">del</button>
            </li>
        </ul>
        <div v-show="!list.length">待办事项空空如也</div>
    </div>
    <script>
        var vm = new Vue({
            el:"#box",
            data:{
                list:["111","222","333"],
                m