inpute框输入table表格动态改变

万能守恒定律

于 2023-01-07 20:36:41 发布

阅读量277

点赞数 1

分类专栏： vue 文章标签： javascript 前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/qq_50951790/article/details/128594830

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

很多时候，可能有需求让我们对input框里面的内容进行监听，如何实现呢？请细细看

首先，我们需要一个数组来存放每次输入的数据

然后，我们需要监听每次数据的变化，此处的obj使用使用结构的形式，可以对上一个数据进行覆盖，如果次数使用push，则每一次都会生成新的数组

v-for遍历每次赋值的数组

结果如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app"></div>
    <template id="root">
            小时：<input type="text" v-model="hour" placeholder="小时">
            分钟：<input type="text" v-model="minute" placeholder="分钟">
        <table border="1px black" v-for="(item,index) in creatList" :key="index">
            <tr>
                <td>小时</td>
                <td>分钟</td>
            </tr>
            <tr>
                <td>{{item.hour}}</td>
                <td>{{item.minute}}</td>
            </tr>
        </table>
    </template>
    <script>
        Vue.createApp({
        template:`#root`,
            data() {
                return {
                    hour:0,
                    minute:0,
                    creatList:[],
                }
        },
         //方法一
            watch:{   
                hour(nvalue,ovalue){
                    this.minute= nvalue*60
                    let obj = {...this.creatList[0],hour:nvalue}
                    this.creatList = [obj]
                },
                minute(nvalue,ovalue){
                    this.hour= nvalue/60
                    let obj = {...this.creatList[0],minute:nvalue}
                    this.creatList = [obj]
                }
            }
       }).mount('#app')
   </script>
</body>
</html>