<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件处理, 双向数据绑定</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--div已經被渲染为Vue v- 开头都称为vue的指令 -->
<div id="app">
<p>{{message}}</p>
<button v-on:click="reverse">逆转消息</button>
<!-- 提供v-model指令来完成表达输入数据之间的双向绑定 -->
<input v-model:value="message" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
},
// 所有的函数都定义在methods
methods:{
reverse:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
Vue-事件数据双向绑定
猜你喜欢
转载自blog.csdn.net/qq_30152625/article/details/83858931
今日推荐
周排行