赞
踩
1. v-model 表单输入绑定
- //使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理
- <template>
- <div>
- <input class="login-input" type="text" v-model="username" placeholder="请输入账号">
- <input class="login-input" type="password" v-model="password" placeholder="请输入密码">
- <div class="login-button" @click="login" type="submit">登陆</div>
- </div>
- </template>
-
- <script>
- export default {
- name: 'Login',
- data() {
- return {
- username: '',
- password: ''
- }
- },
- methods: {
- login() {
- console.log(this.username)
- console.log(this.password)
- }
- }
- }
- <script/>
-
-
2. @input 监听输入框
- //输入框只要输入的值变化了就会触发 input 调用 search
- <template>
- <div class="class">
- <div>
- <input type="text" @input="search"/>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- name: "Search",
- data() {
- },
- methods: {
- search(event){
- console.log( event.currentTarget.value )
- }
- }
- }
- </script>
3. @change 监听输入框
- //输入框失去焦点时,输入的值发生了变化,就会触发 change 事件
- <template>
- <div class="class">
- <div>
- <input type="text" @change="search"/>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- name: "Search",
- data() {
- },
- methods: {
- search(event){
- console.log( event.target.value )
- }
- }
- }
- </script>
4. ref 获取数据
- //这种方式类似于原生DOM,但是ref获取数据更方便
- <template>
- <div class="class">
- <input type="text" ref="inputDom" />
- <button @click="subbmitButton">获取表单数据</button>
- </div>
- </template>
- <script>
- export default {
- name: "Page",
- data() {
- },
- methods: {
- subbmitButton(){
- console.log( this.$refs.inputDom.value )
- }
- }
- }
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。