實現效果如下：
實現代碼及注釋
<!DOCTYPE html><html><head> <title>vue.js數據動態編輯</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會隱藏任何沒有編譯的綁定數據 --><!-- 當元素被點擊后，hideTooltp()方法將被調用 --><div id="main" v-cloak v-on:click="hideTooltip"> <!-- 這是一個tooltip。 v-on:clock.stop是一個關聯點擊事件的句柄，用于停止事件。 v-if保證只有在showtooltip變量為真時才顯示tooltip--> <div class="tooltip" v-on:click.stop v-if="show_tooltip"> <!-- v-model綁定text_content模型的文本內容，對于任何文本編輯框的變化都會被自動更新 --> <input type="text" name="" v-model="text_content"> </div> <!-- 當p區域被點擊后，會調用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"> // 創建一個Vue實例，并且傳遞一個可選對象 var demo = new Vue({ // 一個DOM元素表示view model el: '#main', // 定義屬性值，給出初始值 data: { show_tooltip :false, text_content: '點擊這里進行編輯' }, // 需要使用到的函數 methods: { hideTooltip: function(){ // 當model被修改，view將被自動更新 this.show_tooltip = false; }, toggleTooltip: function(){ this.show_tooltip = !this.show_tooltip; } } })</script></body></html>總結
以上所述是小編給大家介紹的Vue.js實現輸入框綁定的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
