Vue：ref的使用

最新推荐文章于 2024-03-22 07:45:00 发布

kakaaaa!

最新推荐文章于 2024-03-22 07:45:00 发布

阅读量162

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/vily_luky/article/details/82878270

版权

web 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

1：实现A+B = C 使用ref

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

<div id="root">


    <div >
        <span>A:</span><count ref="one" @change="toChange"></count>
        <span>B:</span><count ref="two" @change="toChange"></count>
        <div>
            <span>C:</span><span>{{total}}</span>
        </div>

    </div>
    <script>

        Vue.component('count',{
            template: '<span @click="handlerClick">{{number}}</span>',
            data:function () {

                return{
                    number:0
                }
            },
            methods:{
                handlerClick:function () {
                    this.number ++
                    this.$emit('change')
                }
            }

        })
        var vue = new Vue({
            el: "#root",
            data:{
                total:0
            },
            methods: {

                toChange:function () {
                    this.total=this.$refs.one.number + this.$refs.two.number
                    console.log(this.$refs.one)
                    console.log(this.$refs.two)
                }

            }
        });
    </script>
</div>
</body>
</html>