1.事件处理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>input事件</h1><input type="text" @input="handleInput" v-model="username"> --->{{username}}<h1>change事件</h1><input type="text" @change="handleChange" v-model="username1"> --->{{username1}}<h1>blur事件</h1><input type="text" @blur="handleBlur" v-model="username2"> --->{{username2}}</div>
</body><script>let vm = new Vue({el: '#app',data: {username: 'lqz',username1: '',username2: '',},methods: {handleInput() {console.log(this.username)},handleChange() {console.log('我执行了')},handleBlur(){console.log('失去焦点了')}}})</script>
</html>2.数据的双向绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>单向数据绑定，咱们不用</h1><!-- <p>用户名<input type="text" :value="username"></p>--><!-- <p>密码<input type="password" :value="password"></p>--><!-- <p>--><!-- <button @click="handleSubmit">登录</button>--><!-- </p>--><h1>双向数据绑定</h1><p>用户名<input type="text" v-model="username"></p><p>密码<input type="password" v-model="password"></p><p><button @click="handleSubmit">登录</button></p></div>
</body><script>let vm = new Vue({el: '#app',data: {username: 'lqz',password: '123'},methods: {handleSubmit() {console.log(this.username)console.log(this.password)}}})</script>
</html>v-model进阶
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>lazy修饰符</h1><input type="text" v-model.lazy="username">---->{{username}}<h1>number修饰符</h1><input type="text" v-model.number="username1">---->{{username1}}<h1>trim修饰符</h1><input type="text" v-model.trim="username2">---->{{username2}}
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',username1: '',username2: '',},})
</script>
</html>
本文链接：https://my.lmcjl.com/post/6654.html
展开阅读全文
4 评论