首页 > 其他分享 >【vue2】 demo1

【vue2】 demo1

时间:2023-09-22 23:55:24浏览次数:40  
标签:name idx dataList age demo1 user vue2 editIndex

练习用的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <!--    百度jqueryCDN-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>

    <style>
        .panel.panel-default {
            margin: 6px; /* 添加外边距,可以根据需要调整像素值 */
        }
    </style>

</head>
<body>
<div id="app">
    <h3>表单区域</h3>
    <div>
        <div>
            <label for="id1">姓名</label>
            <input type="text" name="" id="id1" v-model="user">
        </div>
        <div>
            <label for="id2">年龄</label>
            <input type="text" name="" id="id2" v-model="age">
        </div>
        <input type="button" :value="title" v-on:click="addUser">
    </div>

    <h3>数据列表</h3>
    <div class="panel panel-default">
        <table class="table">
            <thead class="panel-heading">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody class="panel-body">
            <tr v-for="(item, idx) in dataList">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <input type="button" value="删除" v-on:click="del(idx)">
                    <input type="button" value="编辑" v-on:click="edit" :data-idx="idx">
                </td>
            </tr>
            <!--        <tr>-->
            <!--            <td>麻子</td>-->
            <!--            <td>50</td>-->
            <!--        </tr>-->
            </tbody>
        </table>
    </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            editIndex: undefined,
            title: "新建",
            user: "",
            age: "",
            dataList: [
                {"name": "张三", "age": 20},
                {"name": "麻子", "age": 30},
            ]
        },
        methods: {
            addUser: function () {

                if (this.editIndex) {
                    // 新增
                    this.dataList[this.editIndex].name = this.user;
                    this.dataList[this.editIndex].age = this.age;
                    alert("修改成功!")
                    this.title = "新建";  // 按钮恢复原装
                    this.editIndex = undefined;
                } else {
                    if ((!this.user.trim()) || (!this.age.trim())) {
                        alert("请输入正确的格式!")
                    } else {
                        // 新增
                        this.dataList.push({"name": this.user, "age": this.age})
                        // this.user='';
                        // this.age='';
                    }
                }
                this.user = '';
                this.age = '';
            },
            del: function (idx) {
                // 数组中删除特定的对象,可以使用splice方法或filter方法  也可以用event.target.dataset.xxx
                this.dataList.splice(idx, 1)
            },
            edit: function (event) {
                let idx = event.target.dataset.idx
                // let name = this.dataList[idx].name
                // let age = this.dataList[idx].age
                let {name, age} = this.dataList[idx]  // 类似于python的解包
                this.user = name;
                this.age = age;
                this.title = "编辑";
                this.editIndex = idx;
            }
        }
    })
</script>
</body>
</html>

标签:name,idx,dataList,age,demo1,user,vue2,editIndex
From: https://www.cnblogs.com/code3/p/17723717.html

相关文章

  • HBuilder打包vue2.0项目生成的APK空白(已解决)
    1、config下面的index.js中bulid模块导出的路径,因为index.html里边的内容都是通过script标签引入的,而路径不对,打开肯定是空白的。先看一下默认的路径。build:{//Templateforindex.html//Paths需要修改的是这里的路径index:path.resolve(__dirname,'........
  • vue2.0 项目创建和配置
    项目的框架概述:前端:1、采用vue2.02、采用elementui后端:1、Jave一、前端1、创建项目vuecreateweb_admin创建成功后的项目结构2、安装elementui指定版本[email protected]、在main.js入口文件引入elementui插件importVuefrom'vue'importAppfro......
  • vue2项目创建
    vue2项目基本安装vuecreare项目名cd项目名code.按照其它模块element-uinpmielement-ui-S在main.js中写入以下内容:importVuefrom'vue'importAppfrom'./App.vue'importElementUIfrom'element-ui';Vue.config.productionTip=falseim......
  • vue2和vue3使用echarts时无数据,怎么显示暂无数据图片或文字
    一开始也经历了用v-if和v-show,v-show的话echarts还会留出暂无数据图片的位置,导致echarts变形,v-if在加载和不加载切换时,dom会获取不到;后来也是在网上找的方法,时间有点长,原文地址就不贴了。对了,在网上查方法的时候还找到了echarts noDataLoading这个方法,按照网上的写完,但是并没有......
  • 从零开始使用vue2+element搭建后台管理系统(动态表单实现(含富文本框))[待完善]
    在后台项目的实际开发过程中,涉及到表单的部分通常会使用动态渲染的方案进行实现,由后端接口返回表单配置,前端进行遍历渲染。考虑到通用后台需要具备的功能,除了基础的表单项如输入、下拉、多选、开关、时间、日期等,还需要具备上传、富文本框等功能。首先导入一个百度来的富文本框插......
  • 关于vue2的模块级总结
    前阵子在赶一个项目的进度,一直没时间做总结,今日闲来无事,消化一下。背景vue2的项目,面向受众为g端内容1.项目原因,单路由下包含详情&列表两页面。根据v-if跳转,笔者这里用的是动态组件的方式2.同样由于项目原因,使用的模块级vuex,因而在使用时,也有了许多盲点:(如图:)使用createNa......
  • vue2 使用tinymce编辑器实现上传图片及粘贴word文本保留格式并粘贴图片自动上传
    下载对应的版本 npminstall@tinymce/[email protected]@5.8.2-S然后在node_modules中找到tinymce把整个文件复制下来粘到public中 在组件页面使用根据自己需求进行注释或添加功能<template><divclass="tinymce-editor"><Editor:......
  • 不再困惑:一文读懂Vue2与Vue3的主要差异
    Vue3相对于Vue2有很多改进和新特性。以下是一些主要的区别:性能更好:Vue3的性能比Vue2更好,因为它使用了更少的代码和更高效的算法。例如,Vue3使用Proxy代替了Object.defineProperty来监听数据变化,这使得Vue3的性能更高。组合式API:Vue3引入了组合式API,这是一种新的编写组件逻辑的方式。......
  • vue2原理初探-数据代理和数据劫持
    本篇文章主要想简单聊聊vue如何实现数据修改,页面联动的底层原理。当然,篇幅有限,只是自己一些浅显的认知而已,我会从一下几个方面去聊,希望对你有所帮助。几个基础知识点数据代理数据劫持完整demo 一、几个基础知识点1.普通函数和箭头函数的区别我们知道,每个函数执行都会......
  • Vue2 Modal组件函数式调用封装(基于Ant Design Vue 组件)
    一、h函数(createElement函数)版本importVuefrom"vue";import{Modal}from"ant-design-vue";//获取扩展Modal组件functiongetModalConstructor(modalProps,childConfig){const{component,...restConfig}=childConfig;returnVue.extend({......