Vue 四种常用获取input值的方法

• 前端

1. v-model 表单输入绑定

//使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理	

    
	    
	    
		登陆
	



    export default {
       name: 'Login',
       data() {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            login() {
                   console.log(this.username)
                   console.log(this.password)
            }
        }
    }

2. @input 监听输入框

//输入框只要输入的值变化了就会触发 input 调用 search	

	
		
			
		
	



	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.currentTarget.value )
			}
		}
	}

3. @change 监听输入框

//输入框失去焦点时，输入的值发生了变化，就会触发 change 事件

	
		
			
		
	



	export default {
		name: "Search",
		data() {
		},
		methods: {
			search(event){
				console.log( event.target.value )
			}
		}
	}

4. ref 获取数据

//这种方式类似于原生DOM,但是ref获取数据更方便

	
		
		
	


    export default {
		name: "Page",
		data() {
		},
		methods: {
			subbmitButton(){
				console.log( this.$refs.inputDom.value )
			}
		}
	}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/831f98f663.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐