vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用

更新時間：2019年04月17日 11:21:48 作者：anyxl

這篇文章主要介紹了vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用,需要的朋友可以參考下

一、表單控件綁定v-model

v-model 雙向數(shù)據(jù)綁定；一般用于表單元素，會忽略表單元素的value、checked、selected的初始值，且將Vue實例的數(shù)據(jù)作為數(shù)據(jù)來源。

① 單行文本框 input[type="text"] 、多行文本框 textarea：

　 v-model值綁定到value屬性；

<body>
  <div id="app">
   <input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
   <textarea v-model="schoolname" value="我是初始學校：北大青鳥"></textarea><br/>
  </div>
  <script src="./vue.js"></script>
  <script>
   var vm = new Vue({
     el:'#app',
     data:{
      username:'小鳴',
      schoolname:'XX科技大學'
     }
   })
  </script>
</body>

ps：下面看下Vue v-bind v-model的使用

v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定,所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無論誰被改變，另一方也會相應(yīng)的更新為相同的數(shù)據(jù)

最基礎(chǔ)的就是實現(xiàn)一個聯(lián)動的效果

<body>
  <div class="app">
    <span>Multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>

</body>
<script>
  new Vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="jack">John</label>
    <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <br>
    <span>Checked names:{{checkedNames}}</span>
  </div>
  
</body>
<script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
</script>

v-bind

有些指令可以在其名稱后面帶一個“參數(shù)” (Argument)，中間放一個冒號隔開。例如，v-bind 指令用于響應(yīng)地更新 HTML 特性

總結(jié)

以上所述是小編給大家介紹的vue指令之表單控件綁定v-model v-model與v-bind結(jié)合使用 ,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: