Vue 开发TodoList(v-model、v-for、v-on) 二

最新推荐文章于 2022-03-28 21:08:40 发布
最新推荐文章于 2022-03-28 21:08:40 发布
阅读量199 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38287952/article/details/88078846
版权

实现：http://www.todolist.cn/ 的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleClick">提交</button>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                }
            }
        });
    </script>
</body>
</html>

Yee Jason
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的列表渲染和双向绑定（初学vue之v-for以及v-model）
百赢出品，必属精品
04-23 1750
列表渲染是指将数据集合（通常是数组）中的每个数据项渲染成相应的 DOM 元素，通常用于显示列表、表格等内容。双向绑定是指视图（DOM）与数据模型之间的双向关联，当数据模型发生变化时，视图会更新；反之亦然，当用户在视图中输入内容时，数据模型会相应地更新。
vue 中v-model表单使用
qq_37550440的博客
01-06 387
<p>输入框{{name}}</p> <input type="text" v-model.trim="name"> <input type="text" v-model.lazy="name"> <input type="text" v-model.number="name"> <p>多行文本</p> <textarea v-model="des"></...
4 list[] 数组、v-for、v-model
wgchen
11-25 758
Vue3循环和数据双向绑定-佳丽列表的制作场景编写Vue3的基本结构声明佳丽数组并循环出来动态增加佳丽总结 场景 本文通过完成大宝剑城展示佳丽列表的需求，学习一下在Vue3.x中如何进行循环展示和双向数据绑定。 如果你想严肃点学习，可以把它看作是一个 TodoList 的小功能，形式不同，知识不变。 编写Vue3的基本结构 在项目根目录，新建一个文件 Demo4.html，然后把Demo1.html的代码全部复制过来，修改下面代码的样子。 <!DOCTYPE html> <html lan
vue3:组件通信v-model式写法
本以为成功很简单，没想到活成普通人都需拼尽全力！
03-28 3876
v-model作为vue中一个非常出色语法糖，帮助我们在开发的过程中省略了很多的麻烦，在进行组件通信的过程中，我们也可以用v-model帮助我们进行一些省事的操作！ 首先说一下我的需求，子组件是一个输入框，每在子组件中输入一段话，父组件中就多一条记录，我采用了element-plus的UI组件库，大概页面是长这个样子！ 做法有很多种，这里为了展示v-model的用法，我采用了在子组件中把数据组成数组，再返回至父组件，父组件直接渲染即可，先看看正常的采用props，emit的写法 正常的采用pro.
Vue入门:Vue常用的基本事件(v-for/v-on/v-model),实现Todo List项目为例
第一段代码的博客
08-11 494
1 v-for:Vue循环取数 v-for 这里已ul->li 循环显示多个li数据为例. <body> <div id="app"> <input type="text" /> <input type="button" value="提交"> <ul> <li v-for="item in list">{{item}}</li>
vue-todolist:Vue-todolist
04-14
使用`v-text`或`v-html`指令可以将数据渲染到页面上，而`v-for`则用于遍历数组并创建重复的DOM元素。 4. **计算属性与侦听器**：Vue提供计算属性（`computed`），它根据其他数据进行计算，并在依赖变化时自动更新。...
vue-todoList.zip
08-12
在待办事项列表中，可能使用`v-for`遍历`todos`数组并渲染列表，`v-bind:key`用于指定每个项的唯一标识，`v-on:click`用于添加点击事件来处理待办事项的完成或删除。 5. **计算属性与方法** 在组件的`data`选项中...
vue-todolist:Vue中的待办事项清单
03-30
Vue还提供了`v-if`和`v-show`指令进行条件渲染，以及`v-for`指令用于循环渲染列表。在`TodoList`组件中，我们可以使用`v-for`遍历数据列表并渲染多个`TodoItem`组件。如果希望根据任务的状态隐藏或显示`TodoItem`，...
vue组件化编程-todoList案例.zip
07-14
- 案例中可能使用了`v-for`循环遍历待办事项列表，`v-bind`（简写`:`）绑定属性，`v-on`（简写`@`）绑定事件等指令。 3. **数据绑定**： - Vue实例中的数据通过`data`选项定义，如`todos`数组存储待办事项。 - ...
vue-todolist:全部清单
05-25
在Vue-todolist中，`v-for`指令用于遍历待办事项列表，而`v-if`则用于根据任务状态显示或隐藏删除按钮。 4. **事件处理**：Vue中的`v-on`指令用于监听和处理DOM事件。在待办事项的添加和删除操作中，可以看到`v-on:...
Todolist（最佳中文版时间管理工具）
03-28
ToDoList 是一个功能强大的任务管理软件，很多细节都考虑到了，值得坚持使用。 ToDoList 帮你把要做的事情列出来，一项一项，类似思维导图。 最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成，提高效率。 当然了习惯是需要慢慢养成了，开始使用 ToDoList 这样的软件会觉得很费劲，但坚持下来你就能体会到管理软件带来的便捷了。
开发TodoList(v-model、v-for、v-on)(2-3)
罗彬桦的博客
01-30 57
开发TodoList(v-model、v-for、v-on) v-model: 监听，绑定数据 v-for: 遍历 v-on: 事件 先看到 var app = new Vue：{ el: 用于绑定div data: 数据 methods: 方法 } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
vue基础之v-model与选择列表
小白的博客
08-10 1183
vue基础之v-model与选择列表 选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。 单选 <div id="app15"> <select v-model="selected"> <option>html</option> <option value="css">css</opt...
八、React实战：可交互待办事务表（表单使用、数据的本地缓存local srtorage、生命同期函数（页面加载就会执行函数名固定为componentDidMount()））
*
11-12 327
一、项目功能概述 示例网址：http://www.todolist.cn/ 功能： 输入待做事项，回车，把任务添加到 【正在进行】 【正在进行】 任务，勾选之后，变成已【经完成事项】 【已完成事务】，勾选之后，变回 【正在进行 】 最后的删除按钮点之后删除事务 二、项目实现 2.1简单的添加、删除功能 【TodoList2 .js】 import React,{Component} from...
vue v-model绑定到数组
热门推荐
sam的博客
09-27 2万+
有次项目中需要用到该场景，正确操作如下 JS data:{ a:{ batch: [], //批号 num: [], //数量 }, } HTML <input v-model="a.batch[0]" type="text" placeholder="请输入批号"> <input v-model="...
使用v-model绑定数组的下标的新增属性时
夏微凉秋微暖的博客
06-13 3889
比如有个list，在通过ajax调取数据后需要对这个list进行新增属性操作 vm.itemList[i].chooseChoiceId = ''; 如果这样在 v-model="itemList[nowItemIndex].chooseChoiceId" 数据是不会实时变化，并且更新dom的。 需要这样： vm.itemList[i].chooseChoiceId = '';...
原生JS实现todolist简版（不保存本地）
knowledge_bird的博客
03-08 1859
HTML部分： &lt;!DOCTYPE html&gt; &lt;html lang="cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
发现一个比较好用的任务管理软件，todolist
zhang_ming1
01-23 3047
用了两天，感觉还算顺手。资源占用不高，界面也算漂亮。在任务比较多的时候可以帮助自己理清哪些该先做哪些该后做。 介绍见 [url]http://www.appinn.com/todolist/[/url]...
vue自定义组件v-model使用心得
天蚕土豆丝的博客
01-21 1091
父组件 <nameList v-model="nameListVisible" :readId="readId"></nameList> 子组件 model: { prop: 'value', event: 'change' }, // 接收父组件传入的参数 props: { value: { type: Boolean, default: false } }, 子组件更新v-model的值，必须通过
vue3的v-model与vue2的v-model一样吗
最新发布
03-28
Vue3的v-model与Vue2的v-model在一些方面有所不同。在Vue2中，v-model是一个语法糖，用于实现双向数据绑定。它可以简化表单元素与组件之间的数据传递。而在Vue3中，v-model的实现方式有所改变。 在Vue3中，v-model被拆分为两个独立的指令：v-model和v-bind。v-model指令用于实现双向绑定，而v-bind指令用于单向绑定。这样的改变使得代码更加清晰和可维护。 具体来说，Vue3中的v-model指令使用了新的Composition API中的`modelValue`和`update:modelValue`属性来实现双向绑定。例如，一个基本的示例代码如下： ```html <template> <input v-model="message"> </template> <script> import { ref } from 'vue'; export default { setup() { const message = ref(''); return { message }; } } </script> ``` 在上述代码中，`message`是一个响应式的变量，通过`ref`函数创建。通过使用v-model指令，我们可以直接在模板中使用`message`变量，并且任何对该变量的修改都会自动更新到输入框中。 总结一下，Vue3的v-model与Vue2的v-model在实现方式上有所不同，但目的都是实现双向数据绑定。Vue3的v-model更加灵活和可维护，通过拆分为v-model和v-bind指令，使代码更加清晰易懂。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值