xinggevip

Vue2.x_2.0实例化多个vue对象
app.jsvar one = new Vue({ el:"#vue-app-one"...
扫描右侧二维码阅读全文
19
2019/05

Vue2.x_2.0实例化多个vue对象

app.js

var one = new Vue({
    el:"#vue-app-one",
    data:{
        title:"Title one",
        name:"Hello one",
    },
    methods:{
        
    }
})

var two = new Vue({
    el:"#vue-app-two",
    data:{
        title:"Title two",
        name:"Hello two",
    },
    methods:{
        changeTitle:function(){
            one.title = "改变标题";
        }
    }
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app-one">
    <h1>{{title}}</h1>
    <p>{{name}}</p>
    </div>

    <div id="vue-app-two">
    <h1>{{title}}</h1>
    <p>{{name}}</p>
    <button v-on:click="changeTitle()">改变标题</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson20

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment