vue中如何利用v-model綁定表單控件

這篇文章主要介紹“vue中如何利用v-model綁定表單控件”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中如何利用v-model綁定表單控件”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司制作網站網頁找三站合一網站制作公司,專注于網頁設計,網站設計制作、網站制作,網站設計,企業(yè)網站搭建,網站開發(fā),建網站業(yè)務,680元做網站,已為上1000+服務,創(chuàng)新互聯(lián)公司網站建設將一如既往的為我們的客戶提供最優(yōu)質的網站建設、網絡營銷推廣服務!

1、v-model 雙向綁定文本

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input v-model="message" placeholder="edit me">
 <p>Message is: {{ message }}</p>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '綁定文本'
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

2、v-model 雙向綁定多行文本，與上面的例子相似。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <<span>Multiline message is:</span>
 <p >{{ message }}</p>
 <br>
 <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   message: '綁定多行文本'
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

3、v-model 綁定復選框

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checked: 'true'
  }
 })
</script>
</html>

輸出結果：選中為true   不選中則為false

vue中如何利用v-model綁定表單控件

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="checkbox" id="jack" value="劉二狗" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="john" value="張麻子" v-model="checkedNames">
 <label for="john">John</label>
 <input type="checkbox" id="mike" value="小狗子" v-model="checkedNames">
 <label for="mike">Mike</label>
 <br>
 <span>Checked names: {{ checkedNames }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   checkedNames: []
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

4、v-model 綁定單選按鈕

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 <br>
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   picked: ''
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

5、v-model 綁定下拉列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: ''
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

多選列表

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected" multiple >
  <option>A</option>
  <option>B</option>
  <option>C</option>
 </select>
 <br>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: []
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

6、動態(tài)選項，用 v-for 渲染：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
   {{ option.text }}
  </option>
 </select>
 <span>Selected: {{ selected }}</span>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   selected: 'A',
   options: [
    { text: 'One', value: 'A' },
    { text: 'Two', value: 'B' },
    { text: 'Three', value: 'C' }
   ]
  }
 })
</script>
</html>

輸出結果：

vue中如何利用v-model綁定表單控件

關于“vue中如何利用v-model綁定表單控件”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

文章題目：vue中如何利用v-model綁定表單控件
本文URL：http://bm7419.com/article24/isgece.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供云服務器、動態(tài)網站、企業(yè)網站制作、虛擬主機、標簽優(yōu)化、軟件開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網站建設