vue学习 14实例化多个vue对象

最新推荐文章于 2023-06-12 09:55:36 发布

扫地鼠Gordon

最新推荐文章于 2023-06-12 09:55:36 发布

阅读量377

点赞数

分类专栏： vue 文章标签：实例化多个vue对象

本文链接：https://blog.csdn.net/qq_28137309/article/details/89226773

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

在第二个组件当中，去改变第一个组件当中的某个属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1> 初始化多个vue对象 </h1>
    <div id="vue-app-one">
        <h2>{{title}}</h2>
        <p>{{greet}}</p>
    </div>

    <div id="vue-app-two">
        <h2>{{title}}</h2>
        <p>{{greet}}</p>
        <button v-on:click="changeOneTitle">change one title</button>
    </div>


    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

app.js

'use strict';
// 实例化vue对象
var one = new Vue({
    el: "#vue-app-one",
    data: {
        title: "app-one的内容",
        // greet: "打招呼"
    },
    methods: {

    },
    computed: {
        greet: function(){
            return "Hello App One";
        }
    }
});

var two = new Vue({
    el: "#vue-app-two",
    data: {
        title: "app-two的内容"
    },
    methods: {
        changeOneTitle: function(){
            one.title="已经改变了";
        }
    },
    computed: {
        greet: function(){
                return "Hello App Two";
            }
    }
});

two.title = "app two 的 title 也被改变了"

扫地鼠Gordon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习 14实例化多个vue对象

在第二个组件当中，去改变第一个组件当中的某个属性的值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Vue.js</title> <link rel="stylesheet" type="text...
复制链接

扫一扫

专栏目录