<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>經(jīng)典的雙向數(shù)據(jù)綁定</title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
  <button @click="modifyMsg">修改msg</button>
<!-- 方向1：將定義好的數(shù)據(jù)綁定到試圖 
實(shí)現(xiàn)方式：雙花括號 
常見指令：v-for v-if v-show …… -->
<!-- 方向2：將視圖中用戶操作的結(jié)果 綁定到指定的數(shù)據(jù)  (多數(shù)指表單控件 input/textarea/select)
  實(shí)現(xiàn)方式： v-model
-->
    <p>{{msg}}</p>
    <input type="text" v-model="userAddress">
    <p>{{"用戶修改的數(shù)據(jù)："+userAddress}}</p>
    <hr>
    <h2>v-model.number</h2>
    <input type="text" v-model.number="n">
    <br>
    <input type="text" v-model.number="m">
    <br>
    <button @click="getNum">求和</button>
    <span>{{num}}</span>
    <hr>
    <h2>v-model.trim</h2>
    <h5>沒有過濾首尾空格時：</h5>
    <input type="text" v-model="myInput">
    <span>{{myInput.length}}</span>
    <h5>過濾首尾空格時：</h5>
    <input type="text" v-model.trim="myInput">
    <span>{{myInput.length}}</span>
    <h2>v-moddel.lazy</h2>
    <h5>input失去焦點(diǎn)時才會輸出myMsg</h5>
    <input type="text" v-model.lazy="myMsg">
    <span>{{myMsg}}</span>
  </div>
  <script>
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs",
        userAddress:"",
        n:0,
        m:0,
        num:0,
        myInput:0,
        myMsg:""
      },
      methods:{
        modifyMsg:function(){
          this.msg = "Hello Model"
        },
        getNum:function(){
          this.num = this.n+this.m;
        }
      }
    })
  </script>
 </body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試，可得到如下運(yùn)行效果

感興趣的朋友可以測試一下看看運(yùn)行效果。

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

您可能感興趣的文章:

相關(guān)文章

vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧
2024-01-01
Vue中代碼編輯器與實(shí)時預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當(dāng)用戶編輯代碼時,實(shí)時預(yù)覽會根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時預(yù)覽,需要的朋友可以參考下
2023-10-10
vue+elementui 實(shí)現(xiàn)新增和修改共用一個彈框的完整代碼
Element-Ul是餓了么前端團(tuán)隊推出的一款基于Vue.js 2.0 的桌面端UI框架，手機(jī)端有對應(yīng)框架是Mint UI ，今天給大家普及vue+elementui 實(shí)現(xiàn)新增和修改共用一個彈框的完整代碼，一起看看吧
2021-06-06
vuex?Mutations同步Actions異步原理解析
這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢堆疊折線圖實(shí)現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項(xiàng)目，做做Demo
2022-09-09
vue項(xiàng)目中公用footer組件底部位置的適配問題
footer為公用組件，其他頁面都需要引入。接下來通過本文給大家分享vue項(xiàng)目中公用footer組件底部位置的適配問題,需要的朋友可以參考下
2018-05-05
vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
Vue.js實(shí)現(xiàn)分頁查詢功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)分頁查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue的mixins屬性詳解
這篇文章主要介紹了vue的mixins屬性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03