VUE 组建中的data必须为函数

最新推荐文章于 2024-06-03 14:34:42 发布

qq_37372407

最新推荐文章于 2024-06-03 14:34:42 发布

阅读量298

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_37372407/article/details/79692882

版权

Vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<div id="app">
    <my-div></my-div>
</div>

<template id="my-div">
    <div>
        <p>{{messgage}}</p>
    </div>
</template>

<script>
    //1.实例化对象
    Vue.component('my-div',{
        template:'#my-div',
        data(){
            return{
                messgage:'我叫MT'
            }
        }
    })


    new Vue({
        el:"#app",
        data:{
            msg:'今天还是要赚钱'
        }
    })
</script>

//例子

<body>
    <div id="app">
        <my_btn></my_btn>
        <my_btn></my_btn>
        <my_btn></my_btn>

    </div>

    <template id="my_btn">
        <button @click="counter += 1">点击次数:{{counter}}</button>
    </template>

    <script>
        //1.实例化组建
        Vue.component('my_btn',{
            template:'#my_btn',
            data(){
                return{
                    counter:0
                }
            }
        });

        new Vue({
            el:"#app"
        })
    </script>