首页 > 其他分享 >vue动态添加输入框简单案例

vue动态添加输入框简单案例

时间:2024-05-28 09:29:20浏览次数:24  
标签:index arr vue 删除 el 输入框 添加 msg

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg" placeholder="输入内容">
        <button @click="add(msg)">添加</button>
        <ul>
            <li v-for="(item, index) in arr" >{{item}}===<button @click="move">删除</button></li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                arr: ['张飞', '关羽', '刘备'],
                msg:'',
            },
            methods: {
                add() {
                    this.arr.push(this.msg)
                },
                move: function (index) {
                    alert('你确定要删除吗')
                    this.arr.splice(index, 1);
                }
            }
        });
    </script>
</body>

</html>

标签:index,arr,vue,删除,el,输入框,添加,msg
From: https://blog.csdn.net/2401_82679799/article/details/139254095

相关文章

  • 彻底搞清楚vue3的defineExpose宏函数是如何暴露方法给父组件使用
    前言众所周知,当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注:本文中使用的vue......
  • Vue框架-路由
    VueRouter笔记1.路由管理安装方式一:采用单页面CDN引入方式使用.方式二:基于vite构建的前端项目工程,安装依赖:在项目根目录下,安装:npminstallvue-router@4-s检查项目根目录下package.json中的dependencies是否多出:"vue-router"依赖.路由简单使用在sr......
  • Vue+OpenLayers7入门到实战:OpenLayers实现在地图上拖拽编辑修改绘制图形
    返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7入门到实战前言本章介绍如何使用OpenLayers7在地图上拖拽编辑修改绘制图形。在前面一章中,我们已经学会了如何绘制基础的三种图形线段、圆形和多边形:《Vue+OpenLayers7入门到实战:OpenLayers图形绘制功能,OpenLayers实现在地......
  • vue项目创建(git-bash版本)
    前言        1、安装git-bash        2、安装node.js        3、npm包管理工具安装        4、安装webpack工具        5、安装vue-cli        6、创建项目        7、问题报错解决方案前言      ......
  • 如何在AutoCAD中添加图层前缀
    在AutoCAD绘图过程中,合理地管理图层是确保绘图效率和清晰度的关键。有时,我们可能需要为图层添加统一的前缀,以便于区分不同的图层组或满足特定的绘图标准。本文将介绍如何使用AutoCAD.NETAPI创建一个简单的工具,以自动添加图层前缀。环境准备在开始之前,请确保您具备以下条件:......
  • Vue3实战笔记(46)—Vue 3高效开发定制化Dashboard的权威手册
    文章目录前言Dashboard开发总结前言后台管理系统中的Dashboard是一种图形化的信息显示工具,通常用于提供一个特定领域或系统的概况。它可以帮助用户监控和分析数据,快速获取重要信息。可以帮助用户监控业务状况、分析数据、获取关键信息和管理资源。通过合理的设计和......
  • Vue3实战笔记(47)— 一探emit奥秘——组件间通信的艺术与实践
    文章目录前言一、Vue2中的emti二、Vue3的emit总结前言Vue封装了自定义组件之后,如果子组件想要向父组件传递数据该怎么办?Vue.js中的emit方法就是主要用于组件间的通信,特别是父组件与子组件之间的通信机制。它是Vue组件内部触发自定义事件并向父级组件传递数......
  • 基于SpringBoot+Vue+uniapp的IT技术交流和分享平台的详细设计和实现(源码+lw+部署文档
    文章目录前言具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • vue3计算属性
    基础示例模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。比如说,我们有这样一个包含嵌套数组的对象:我们想根据author是否已有一些书籍来展示不同的信息:这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白......
  • 升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0 uniapp、vue、android、web 框
    升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一)  升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(一) 1.登录与申请试用界......