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 是 data 的成员，它不是 html 位正在寻找的明确内容？

Answer 1

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

Answer 2

在您的示例中，您输入错误的 el 和 e1，并且您忘记创建 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() method/object 中初始化变量，如果您想对变量的值进行任何更改。您可以通过事件或 mounted/created 挂钩来做到这一点。

根据您的代码进行演示 :

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>

Vue.js 变量

Vue.js Variables

html

javascript

vue.js