Vue入门基础（多个vue实例对象）

时间 2019-12-22

标签 vue 入门基础多个实例对象繁體版

原文原文链接

morevue.htmljavascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <h1>多个vue实例对象</h1>
    <div id="app-vue-one">
        {{name}}
        <p>{{getname}}</p>
    </div>
    <div id="app-vue-tow">
        {{name}}
        <p>{{getname}}</p>
        <button v-on:click="tochangeone">改变one对象的名称</button>
    </div>
</body>
<script src="morevue.js"></script>

</html>

morevue.jshtml

const one=new Vue({
    el:"#app-vue-one",
    data(){
        return{
            name:"im one"
        }
    },
    methods:{

    },
    computed:{
        getname(){
            return "get name="+this.name;
        } 
    }
});

const tow=new Vue({
    el:"#app-vue-tow",
    data(){
        return{
            name:"im tow"
        }
    },
    methods:{
        tochangeone(){
            one.name="im one add tow"
        }
    },
    computed:{
        getname(){
            return "get name="+this.name;
        }
    }
});

页面效果vue

点击按钮以后java

1. 实例化多个vue对象
2. 【vuejs基础】第一节：vue实例对象如何New一个vue对象
3. vue基础入门案例
4. Vue基础-Vue入门
5. Vue入门-Vue实例
6. Vue基础（vue实例data）
7. Vue基础之Vue实例
8. VUE基础入门
9. Vue入门基础
10. vue入门实例
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Kotlin 基础语法 - Kotlin 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用