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

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

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

一、表單控件綁定v-model

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

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

　 v-model值綁定到value屬性；

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

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

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

最基礎(chǔ)的就是實(shí)現(xiàn)一個(gè)聯(lián)動(dòng)的效果

<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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

Element MessageBox彈框的具體使用
這篇文章主要介紹了Element MessageBox彈框的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
詳解Vue3如何加載動(dòng)態(tài)菜單
這篇文章主要為大家詳細(xì)介紹了Vue3是如何實(shí)現(xiàn)加載動(dòng)態(tài)菜單功能的，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-07-07
詳解如何配置vue-cli3.0的vue.config.js
這篇文章主要介紹了詳解如何配置vue-cli3.0的vue.config.js，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
Vue+canvas實(shí)現(xiàn)水印功能
實(shí)際項(xiàng)目中偶爾會(huì)遇到給項(xiàng)目頁(yè)面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對(duì)大家有所幫助
2023-07-07
解決Vue數(shù)據(jù)更新了但頁(yè)面沒有更新的問(wèn)題
在vue項(xiàng)目中,有些我們會(huì)遇到修改完數(shù)據(jù),但是視圖卻沒有更新的情況,具體的場(chǎng)景不一樣,解決問(wèn)題的方法也不一樣,在網(wǎng)上看了很多文章,在此總結(jié)匯總一下,需要的朋友可以參考下
2023-08-08
安裝vue3開發(fā)者工具但控制臺(tái)沒有顯示出vue選項(xiàng)的解決
這篇文章主要介紹了安裝vue3開發(fā)者工具但控制臺(tái)沒有顯示出vue選項(xiàng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目中路由跳轉(zhuǎn)頁(yè)面不變問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過(guò)程(無(wú)瑕疵,完美版)
突然接到公司需求,說(shuō)客戶想讓我們把項(xiàng)目直接打包,所以下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成exe可執(zhí)行文件的實(shí)現(xiàn)過(guò)程,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
一文帶你掌握?Vue3.5常用特性
Vue3.5?發(fā)布已近半年,這篇文章主要來(lái)和大家技術(shù)一下它常用的新增和改動(dòng)特性,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-01-01
Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐
要在Web頁(yè)面中加入地圖，我推薦你使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐,需要的朋友可以參考下
2021-07-07