在vue中獲取input值的方法:1.新建html項目,引入vue;2.定義input輸入框,設置v-model樣式;3.綁定變量和按鈕;
具體步驟如下:
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>