快捷導(dǎo)航

vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例

更新時(shí)間：2019年03月08日 12:06:49 作者：白楊-M

這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結(jié)合完整實(shí)例形式分析了v-model實(shí)現(xiàn)表單input元素?cái)?shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能。分享給大家供大家參考，具體如下：

v-model 一般表單元素(input) 雙向數(shù)據(jù)綁定

el:'#box',//這里放的是選擇器。

不然會(huì)不生效

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.fzitv.net vue.js數(shù)據(jù)雙向綁定</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',//這里放的是選擇器
        data:{
          msg:'welcome vue'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
  </div>
</body>
</html>

運(yùn)行效果：

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

手把手教你寫一個(gè)vue全局注冊的Toast的實(shí)現(xiàn)
本文主要介紹了手把手教你寫一個(gè)vue全局注冊的Toast的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue關(guān)于自定義事件的$event傳參問題
這篇文章主要介紹了Vue關(guān)于自定義事件的$event傳參問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue組件層級(jí)關(guān)系詳細(xì)分析
這篇文章主要介紹了Vue組件的層級(jí)關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue動(dòng)態(tài)綁定background的方法
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動(dòng)態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧
2023-10-10
vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案
假設(shè)有一個(gè)頁面,需要分三步填寫三個(gè)表單,且每個(gè)表單位于獨(dú)立的組件中,然后最后保存同時(shí)提交,如何進(jìn)行表單必填項(xiàng)校驗(yàn),下面小編給大家介紹vue+elementUI多表單同時(shí)提交及表單校驗(yàn)最新解決方案,感興趣的朋友一起看看吧
2024-03-03
vue實(shí)現(xiàn)無縫滾動(dòng)手摸手教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)無縫滾動(dòng)手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
今天小編就為大家分享一篇vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-04-04
基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁面的方法
今天小編就為大家分享一篇基于vue循環(huán)列表時(shí)點(diǎn)擊跳轉(zhuǎn)頁面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
vue{{}}拼接字符串和換行符方式
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-12-12