Vue.js实现输入框绑定的实例代码

   <title>vue.js数据动态编辑</title> /* 在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-l<strong style="color:transparent">来源gaodai#ma#com搞@代~码$网</strong>inear-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; }  <!-- 在Vue实例准备好之前，v-vloak会隐藏任何没有编译的绑定数据 --><!-- 当元素被点击后，hideTooltp()方法将被调用 --><div id="main"> <!-- 这是一个tooltip。 v-on:clock.stop是一个关联点击事件的句柄，用于停止事件。 v-if保证只有在showtooltip变量为真时才显示tooltip--><div class="tooltip"> <!-- v-model绑定text_content模型的文本内容，对于任何文本编辑框的变化都会被自动更新 --></div><!-- 当p区域被点击后，会调用toggleTooltip方法，阻止事件扩散 --><!-- mustache表达式将会替换text_content的值，它将会自动更新变量值的所有变化 --><p>{{text_content}}</p></div>