Vue.js 变量

Question

我对 Vue.js（和一般的 html）非常陌生，我正在尝试使用 Vue.js 来自动化 Bulma 选项卡切换，而不需要很多 HTML 文档。

<li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li>

这是交换哪个选项卡处于活动状态的行之一的示例。 我很好奇在哪里可以初始化tabsel变量以及作用域如何工作？

我最初有一个 .js 文件，我是这样加载的：

let app = {};

let init = (app) => {
    app.vue = new Vue({
        e1: "#vueapp",
        data () {
            return {
                tabsel: "profile",
            }
        }
    });
}

最终我不确定第一个代码片段是否应该能够看到这个值。 初始化此变量的正确方法是什么？ 在我的示例中，这不起作用，因为 tabsel 是数据的成员，而这不是 html 位正在寻找的明确内容？

Answer 1

在 vue js 中，它被称为状态。 在您的情况下，“tabsel”是一种状态。 该状态将拥有将在应用程序内共享的数据。 如果你创建一个变量。 你不能轻易地接受其他组件的价值。 这就是引入状态的原因。 如果你使用 vuex，在应用程序内部可以全局访问在 vuex 中创建的状态。

Answer 2

在您的示例中，您使用e1输入了错误的el并且您忘记了创建 HTML 根元素（将用于挂载应用程序）。

通过更正这些错误，您可以在此处看到它的工作原理：

 let app = {}; let init = (app) => { app.vue = new Vue({ el: "#vueapp", data () { return { tabsel: "profile", } } }); } init(app)

 .is-active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="vueapp"> <ul> <li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li> <li :class="[ tabsel === 'example' ? 'is-active' : '']"> <a @click="tabsel = 'example'">Example</a></li> </ul> </div>

至于范围，只要您的变量在data中定义，它们就是反应式的，您可以在 HTML 模板中使用它们。

Answer 3

初始化此变量的正确方法是什么？

在 Vue 中，您可以在 data() 方法/对象中初始化变量，如果您想对变量的值进行任何更改。 你可以通过事件或挂载/创建的钩子来做到这一点。

根据您的代码演示：

 new Vue({ el: '#app', data:{ tabsel: null // Initializing }, mounted() { this.tabsel = 'profile'; // Assinging value to the variable } });

 .is-active{ background: #444; color: #eee; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-bind:class="{'is-active': tabsel === 'profile' }"> My Profile </div> </div>