【Vue】单向绑定、双向绑定及事件绑定
单向绑定
<div id="app">
<div v-bind:style="msg">单向绑定</div>
<div :style="msg">单向绑定2</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'color:red;'
}
})
</script>
双向绑定
<div id="app">
{{keyword}}
<br/>
<input type="text" :value="keyword"/>
<br/>
<input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:"hello,world"
}
})
</script>
事件绑定
<div id="app">
<button v-on:click="show()">事件绑定1</button>
<button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log("show.....")
}
}
})
</script>