双方向データバインディングを使用する時に使用する
双方向データバインディングとは
dataオブジェクトの値変更 → テンプレートの値変更に加えて、(v-bind) dataオブジェクトの値変更 ← テンプレートの値変更も可能にすること
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
<div id="app">
<p><input type="text" v-model="message"></p>
<p><input type="text" v-model="message"></p>
<pre> {{ $data }}</pre>
</div>
<script>
const app = Vue.createApp({
data: () => ({
message: 'Hello Vue.JS!'
}),
methods: {
onClick: function(){
this.now = new Date().toLocaleString()
}
}
})
app.mount('#app')
</script>
</body>
</html>