Custom events can also be used to create custom inputs that work with v-model.
<input v-model="something">
is just syntactic sugar for:
<input v-bind:value="something" v-on:input="something = $event.target.value">
v-model 可以直接做資料的雙向綁定, 它其實是input event 的語法糖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> demo</title>
<script src="//unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id='vm'>
<br/>
<span :style="{color: activeColor}">{{article}}</span>
<br/>
{{msg}}
<br/>
<input v-model="msg" placeholder="edit me">
<input v-bind:value="msg" v-on:input="msg = $event.target.value">
</div>
<footer>
<script>
var vm = new Vue({
el: "#vm",
data:{
'msg':'hello',
'article':'閱讀習慣改變，又一家老書局明年熄燈',
activeColor: 'blue',
}
})
</script>
</footer>
<?php
print " ";
?>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> demo</title>
<script src="//unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id='vm'>
<br/>
<span :style="{color: activeColor}">{{article}}</span>
<br/>
{{msg}}
<br/>
<input v-model="msg" placeholder="edit me">
<input v-bind:value="msg" v-on:input="msg = $event.target.value">
</div>
<footer>
<script>
var vm = new Vue({
el: "#vm",
data:{
'msg':'hello',
'article':'閱讀習慣改變，又一家老書局明年熄燈',
activeColor: 'blue',
}
})
</script>
</footer>
<?php
print " ";
?>
</body>
</html>
END
