Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

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

javascript

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