<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
console.log(this)
new Vue({
el:"#app",
template:`
<div>
单向数据绑定
<input type='text' v-bind:value="name" :class="name"><br>
双向数据绑定
<input type='text' v-model="name"></br>
{{ name }}
<button v-on:click="change">点击我改变name变量</button>
</div>
`,
data:function(){
return {
name:'hello'
}
},
methods:{
change:function(){
console.log(this)
this.name='我改变了，是在方法属性里面定义的方法'
},
}
})
</script>
</body>
</html>
阐述vue单双向数据流及事件绑定
猜你喜欢
转载自www.cnblogs.com/xl4ng/p/12577908.html
今日推荐
周排行