如何在 Vuejs 中调用 2 个变量？

Question

我正在使用 Vuejs。

我想调用 2 个变量。

我该怎么办？

这些是我的真实代码。

（我想添加一个代码，它将在带有 class [.close] 的模态中隐藏 (x) 按钮）

我编辑了我以前的post。对不起。

    window.app = new Vue({
    el: '#vuelayoutdiv',
    data: {
        text: null
    },
    methods: {
        submitToSignIn: function () {
            window.location.href = "/{Contoller}/{Index}"
        },
        checkEmail: function (e) {
            if (this.text) {
                return true;
            };
            if (!this.text) {
                this.$bvModal.show('emailmodal');
            }
        }

    }

});


   <b-modal id="emailmodal" hide-footer>
        @*<template v-slot:modal-title>
            Using
            <code>$bvModal</code> Methods
        </template>*@
        <div class="d-block text-center">
            <h3  style="text-align:left">Email required.</h3>
        </div>
        <b-button class="mt-3" block v-on:click="$bvModal.hide('emailmodal')">Close Me</b-button>
    </b-modal>
<b-nav-item class="navbarsigntext signin" v-on:click="submitToSignIn">SIGN IN</b-nav-item>

Answer 1

将数据用作函数并return您的变量。

阅读 Vue js 中的语法：- https://vuejs.org/v2/guide/components.html

var variable1 = new Vue({
 el: '#app1',
 data () {
   return {
    text1:"sample"
   }
 },
})

var variable2 = new Vue({
 el: '#app2',
 data () {
   return {
    text2:"sample"
   }
 }
})

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>

<div id="app1">
  {{ text1 }}
</div>

<div id="app2">
  {{ text2 }}
</div>

Answer 2

访问其他 Vue 实例变量很容易。尽管这不是很常见的做法，而且我也不确定您要做什么。

这里有一个例子，总共有三个实例，其中第三个从对象一和对象二获取消息变量。

var vueObj1 = new Vue({
  data () {
    return {
      message: "vueobj1"
    }
  },
})

var vueObj2 = new Vue({
  data () {
    return {
      message: "vueobj2"
    }
  },
})

var vueObj3 = new Vue({
  el: '#app',
  computed: {
    messageFromOtherInstances () {
      return vueObj1.message + ' ' + vueObj2.message
    }
  }
})

我有一个小代码笔给你玩：https://codepen.io/dasmikko/pen/XWWybdr

如何在 Vuejs 中调用 2 个变量？

How to I call 2 variables in Vuejs?

c#

model-view-controller

asp.net-mvc

vue.js

bootstrap-vue