溫馨提示×

vue中如何獲取input的值

養魚的貓咪
737
2021-05-10 09:22:10
欄目: 編程語言

在vue中獲取input值的方法:1.新建html項目,引入vue;2.定義input輸入框,設置v-model樣式;3.綁定變量和按鈕;

vue中如何獲取input的值

具體步驟如下:

1.首先,新建一個html項目,并在項目中引入vue;

<!DOCTYPE html>

<html>

<head>

<script src="./js/vue.js"></script>

<title></title>

</head>

<body>

</body>

</html>

2.vue引入好后,在項目中定義一個input輸入框,并設置v-model樣式;

<!DOCTYPE html>

<html>

<head>

<script src="./js/vue.js"></script>

<title></title>

</head>

<body>

<div id="app">

<input type="text" v-model="searchName"/><button @click="search"></button>

</div>

</body>

</html>

3.最后,input輸入框定義好后,在項目中將變量綁定輸入框和將搜索函數綁定按鈕即可;

<!DOCTYPE html>

<html>

<head>

<script src="./js/vue.js"></script>

<title></title>

</head>

<body>

<div id="app">

<input type="text" v-model="searchName"/><button @click="search"></button>

</div>

<script>

var app = new Vue({

el:"#app",

data:{

searchName:''

},

methods:{

search:function(){

console.log(this.searchName);

}

}

});

</script>

</body>

</html>


0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女