Vue-多个实例对象

<!-- Vue--多个实例化对象 -->

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="styledemo1.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>  
    <div id="vue-app-one">
    <h4>{{ title }}</h4>
    <p>{{ greet }}</p>
    </div>
    <div id="vue-app-two">
    <h4>{{ title }}</h4>
    <p>{{ greet }}</p>
    <button v-on:click="changetitle1">改title</button>
    </div>
    <script src="app9.js"></script>
</body>
</html>
var a = new Vue({
    el:"#vue-app-one",
    data:{
        title:"one"
    },
    methods:{   
    },
    computed:{
        greet: function(){
                return "111";
        }
    }   
});

var b = new Vue({
    el:"#vue-app-two",
    data:{
        title:"two"
    },
    methods:{
        changetitle1:function(){
            a.title="已经改了one";
        }   
    },
    computed:{
        greet: function(){
            return 222;
        }
    }   
});
    b.title="改了2的titile";
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容