Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

v-if属性を設定すると、表示の切り替えができる

v-if属性を設定すると、表示の切り替えができます

実際のところ

gopher.jsのサンプルは以下の通り

<!DOCTYPE html>
<html>

<body>
    <div id="app" v-cloak>
        <div>str: {{ result }} </div>
	
	    <span v-bind:title="result" v-if="flag">
		Hover your mouse over me for a few seconds
		to see my dynamically bound title!
	    </span>
	    <div>
		<button v-on:click="Button">Button</button>
	    </div>
    </div>
    <script type="text/javascript" src="basic.js"></script>
</body>

</html>
package main

import (
	"github.com/gopherjs/gopherjs/js"
	"github.com/oskca/gopherjs-vue"
)

type Model struct {
	*js.Object        // this is needed for bidirectional data bindings
	Result        string `js:"result"`
	Flag            bool `js:"flag"`
}

// this would be recognized as Inc in html
func (m *Model) Button() {
	m.Flag = !(m.Flag)
}


func main() {
	m := &Model{
		Object: js.Global.Get("Object").New(),
	}
	// field assignment is required in this way to make data passing works
	m.Result = "as string"
	m.Flag = true
	// create the VueJS viewModel using a struct pointer
	vue.New("#app", m)
}

ボタンで切り替えができるようになっています。
フラグがtrueの場合はマウスオーバー部分が表示、
falseの場合は表示されないといった切り替えが可能となります

この程度だとまるで旨みが無いですが……

参考もと

jp.vuejs.org