Vue.js實現(xiàn)輸入框綁定的實例代碼

更新時間：2017年08月24日 12:01:57 作者：Dragonir

這篇文章主要介紹了Vue.js實現(xiàn)輸入框綁定的實例代碼,需要的朋友可以參考下

實現(xiàn)效果如下：

實現(xiàn)代碼及注釋

<!DOCTYPE html>
<html>
<head>
  <title>vue.js數(shù)據(jù)動態(tài)編輯</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    /* 在Vue實例沒有準備好之前隱藏沒有編譯的mustache */
    [v-cloak]{
      display: none;
    }
    *{
      padding: 0;
      margin: 0;
    }
    body{
      font: 15px/1.3 'Open Sans', sans-serif;
      color: #5e5b64;
      text-align: center;
    }
    a, a:visited{
      outline: none;
      color: #389dc1;
    }
    a:hover{
      text-decoration: none;
    }
    section,footer,header,aside,nav{
      display: block;
    }
    /* tooltip style */
    .tooltip{
      background-color: #03c03c;
      background-image: -webkit-linear-gradient(top, #03c03c, gray);
      background-image: -moz-linear-gradient(top,#03c03c, gray);
      background-image: linear-gradient(top, #03c03c, gray);
      box-shadow: 0 1px 1px #ccc;
      border-radius: 3px;
      width: 290px;
      padding: 10px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      top: 50px;
    }
    /* 小三角形 */
    .tooltip:after{
      content: "";
      position: absolute;
      border: 6px solid #03c03c;
      border-color: #03c03c transparent transparent;
      width: 0;
      height: 0;
      bottom: -12px;
      left: 50%;
      margin-left: -6px;
    }
    .tooltip input{
      border: none;
      width: 100%;
      line-height: 34px;
      border-radius: 3px;
      box-shadow: 0 2px 6px #bbb inset;
      text-align: center;
      font-size: 16px;
      font-family: inherit;
      color: #8d9395;
      font-weight: bold;
      outline: none;
    }
    p{
      font-size: 22px;
      font-weight: bold;
      color: #6d8088;
      height: 30px;
      cursor: pointer;
    }
    p b{
      color: #fff;
      display: inline-block;
      padding: 5px 10px;
      background-color: #c4d7e0;
      border-radius: 2px;
      text-transform: uppercase;
      font-size: 18px;
    }
    p:before{
      content:"✎";
      display: inline-block;
      margin-right: 5px;
      font-weight: normal;
      vertical-align: text-bottom;
    }
    #main{
      height: 300px;
      position: relative;
      padding-top: 150px;
    }
  </style>
</head>
<body>
<!-- 在Vue實例準備好之前，v-vloak會隱藏任何沒有編譯的綁定數(shù)據(jù) -->
<!-- 當元素被點擊后，hideTooltp()方法將被調(diào)用 -->
<div id="main" v-cloak v-on:click="hideTooltip">
  <!-- 這是一個tooltip。
    v-on:clock.stop是一個關(guān)聯(lián)點擊事件的句柄，用于停止事件。
    v-if保證只有在showtooltip變量為真時才顯示tooltip-->
  <div class="tooltip" v-on:click.stop v-if="show_tooltip">
    <!-- v-model綁定text_content模型的文本內(nèi)容，對于任何文本編輯框的變化都會被自動更新 -->
    <input type="text" name="" v-model="text_content">
  </div>
  <!-- 當p區(qū)域被點擊后，會調(diào)用toggleTooltip方法，阻止事件擴散 -->
  <!-- mustache表達式將會替換text_content的值，它將會自動更新變量值的所有變化 -->
  <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script type="text/javascript">
  // 創(chuàng)建一個Vue實例，并且傳遞一個可選對象
  var demo = new Vue({
    // 一個DOM元素表示view model
    el: '#main',
    // 定義屬性值，給出初始值
    data: {
      show_tooltip :false,
      text_content: '點擊這里進行編輯'
    },
    // 需要使用到的函數(shù)
    methods: {
      hideTooltip: function(){
        // 當model被修改，view將被自動更新
        this.show_tooltip = false;
      },
      toggleTooltip: function(){
        this.show_tooltip = !this.show_tooltip;
      }
    }
  })
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的Vue.js實現(xiàn)輸入框綁定的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: