vue父子通信之三数定值求和

最新推荐文章于 2023-01-05 14:55:19 发布

pardon110

最新推荐文章于 2023-01-05 14:55:19 发布

阅读量507

点赞数

分类专栏： javascript 算法 Vue 笔记

本文链接：https://blog.csdn.net/u011584949/article/details/107250907

版权

javascript 同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

算法

63 篇文章 0 订阅

订阅专栏

Vue 笔记

9 篇文章 0 订阅

订阅专栏

需求

假定三数不大于n的整数v1,v2,v3，其和为n
要求改变任意数值，其它两数会自适应调整，确保三数和仍为n
调用规则 : 假定三数顺序固定索引为 0，1，2，那么0数值增加了，则1数优先减少，不够则向2数借，即0->1->2->0->1->2…顺序
假定初始值分别为 40， 30， 30 ，定值和100，实现页面改变输入改变任意数，其它二数按规则自动变更

分析

父组件维护初始的数据信息数组及定值
被改变数值的组件向父组件发出事件时，携带当前改变的值，以及当前值所在的索引参数
父组件监听子组件事件回调内，可由定值减去其兄弟值得到当前索引上一次的旧值
比较新旧值，决定它的下一个数值是增是减
求模寻找循环次索引。如当前索引值为index，三个数而言它的下一个·ndex % 3

Dom

<body>

    <div id="app">
        <p>总数 {{items[0]}} + {{items[1] }} + {{items[2]}} = {{ total }}</p>
        <li>value1：{{ items[0] }}</li>
        <li>value2：{{ items[1] }}</li>
        <li>value3：{{ items[2] }}</li> 

        <hr>
        <h1>{{msg}}</h1>
        <ol>
            <li v-for="(value,index) in items">
                <vinput v-model="value" :index="index" @input="calcu" />
            </li>
        </ol>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

代码


<script>
    // 组件数据流动方向 0->1->2->0...
    Vue.component('vinput', {
        model: {
            prop: 'value',
            event: 'input'
        },
        props: ['value', 'index'],
        template: `
        <p>
            value{{index}}:
            <input
                type="text"
                v-bind:value="value"
                v-on:input="$emit('input', $event.target.value,index)"
            >
        </p>
        `
    })

    var app = new Vue({
        el: '#app',
        data: {
            total: 100,
            items: [40, 30, 30],
            msg: ''
        },
        methods: {
            calcu(newValue, index) {
                if (!newValue) {
                    newValue = 0
                } else {
                    newValue = parseInt(newValue)
                }

                if (isNaN(newValue) || (newValue < 0 || newValue > this.total)) {
                    this.msg = `请输入不大于${this.total}的正整数`
                    return
                }

                // 获取输入后的副本数据
                let items = [...this.items].map(x => parseInt(x))
                // 计算新旧值变动差额，以便计算下一个值是增或减
                let diff = newValue - (this.total - items[(index + 1) % 3] - items[(index + 2) % 3])
                if (diff > 0) {
                    if (diff > items[(index + 1) % 3]) {
                        items[(index + 1) % 3] = 0
                    } else {
                        items[(index + 1) % 3] = items[(index + 1) % 3] - diff
                    }
                } else {
                    items[(index + 1) % 3] = items[(index + 1) % 3] - diff
                }

                items[index] = newValue
                items[(index + 2) % 3] = this.total - items[index] - items[(index + 1) % 3]

                this.items = items
                this.msg = ""
            },
        }

    })
    console.log(Vue.version) // 2.6.11
</script>

pardon110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue父子通信之三数定值求和

需求假定三数不大于n的整数v1,v2,v3，其和为n要求改变任意数值，其它两数会自适应调整，确保三数和仍为n调用规则 : 假定三数顺序固定索引为 0，1，2，那么0数值增加了，则1数优先减少，不够则向2数借，即0->1->2->0->1->2…顺序假定初始值分别为 40， 30， 30 ，定值和100，实现页面改变输入改变任意数，其它二数按规则自动变更分析父组件维护初始的数据信息数组及定值被改变数值的组件向父组件发出事件时，携带当前改变的值，以及当前值所
复制链接

扫一扫