我對 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 位正在尋找的明確內容？
uj5u.com熱心網友回復：
在您的示例中，您輸入錯誤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 模板中使用它們。
uj5u.com熱心網友回復：
在 vue js 中，它被稱為狀態。在您的情況下，“tabsel”是一種狀態。該狀態將擁有將在應用程式內共享的資料。如果你創建一個變數。你不能輕易地接受其他組件的價值。這就是引入狀態的原因。如果你使用 vuex，在應用程式內部可以全域訪問在 vuex 中創建的狀態。
uj5u.com熱心網友回復：
初始化此變數的正確方法是什么？
在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/479053.html
標籤：javascript html Vue.js