Inline反轉布爾@vlick.js

對於一個簡單的演示，我想顛倒我的Vue.js實例的data屬性中定義的布爾值。Inline反轉布爾@vlick.js

我的嘗試：

<button v-on:click="!spanVisible" type="button">Toggle</button>

和

<button v-on:click="(!spanVisible)" type="button">Toggle</button>

我想避免或者寫一個單獨的方法或有這樣的事情我裏面V系列：點擊=「」：spanVisible ? !spanVisible : !spanVisible因爲它只是多餘的。

所以現在我的問題主要是：爲什麼不直接反轉工作？我還有什麼其他可能性使它簡單而簡潔？

編輯：

最短的變化，我發現現在的問題是使用spanVisible = !spanVisible，但不知道這是可用的最簡潔的版本。

SOLUTION：

我找到了意見建議由@Sombriks最好的解決辦法：使用v-on:click="!spanVisible" 只評估的spanVisible的反轉值，但不交它的價值，分配一個新值它可以使用v-on:click="spanVisible = !spanVisible"，這似乎是目前最簡潔的工作版本。

來源

2016-12-16 Ivan Sieder

你試過'！（spanVisible）'？ – iHasCodeForU

by just doing！spanVisible你沒有改變價值，只是評估它。 x =！x是那裏的方式，它在angular1.x系列中也是一個有效的習慣用法。 – Sombriks

@iHasCodeForU是的，這就是我上面提到的，那是行不通的。 –

MVVM或MVC框架的關鍵點是模型驅動的。 spanVisible是您的模型的一個屬性。所以你需要在每個處理程序中直接更新它的值。

來源

2016-12-16 07:46:27 jiajianrong

你做錯了。 <button v-on:click="toogle" type="button">Toggle</button>

在腳本的一部分：如果您使用Vue的組件

data() { 
    return { 
     spanVisible: true 
    } 
}, 
methods: { 
    toogle() { 
     this.spanVisible = !this.spanVisible 
    } 
}

注意data聲明這種方式。如果你正在使用文件腳本，你會跳過return

來源

2016-12-16 08:16:26

Actuelly，@Sombriks在評論中提出的解決方案是我正在尋找的解決方案，我需要一個簡潔的解決方案。你的工作（如果你在數據對象之後加一個逗號）。那一個（來自@Sombriks）也是完全有效的，因爲它只是一個賦值表達式。（只要糾正了缺失的逗號，將刪除downvote） –

我沒有看到任何缺少逗號... –

那麼，你現在批准我的編輯，因爲它似乎，我已經添加了逗號;）以前，還有一個缺少的逗號。見http://stackoverflow.com/posts/41179971/revisions –

Inline反轉布爾@vlick.js

回答

相關問題