自定义组件

组件中的data 使用方法
 
<!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>
        组件中的data
    </title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom>
        </mycom>
        <mycom>
        </mycom>
        
    </div>
    <template id="temp">
        <div>
            <input type="button" value="自增" @click="increment" />
            <p>
                {{count}}
            </p>
            <span>{{text}}</span>
        </div>
    </template>
    <script type="text/javascript">
        Vue.component('mycom', {
            template: '#temp',
            data: function () {
                return {
                    count: 0,
                    action:'add'  //定义动作
                }
            },
            props: {
               text:'String'
            },
            methods: {
                increment() {
                      // 大于10 后 count自减1
                    if (this.action == "add" && this.count < 10) { this.count++; }
                    
                    else {
                        if (this.count > 0) {
                            this.action = "minus"
                            this.count--;
                        } else {
                        //count自减小于 1后  
                            this.action = "add"
                            this.count++;
                        }
                       
                    }
                }
            }
        });
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>
        
       

</html>
 

posted on 2022-06-20 17:03  码农at突泉  阅读(30)  评论(0)    收藏  举报