实现效果如下:
实现代码及注释
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title> vue.js数据动态编辑& lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;风格类型=" text/css "比;/*在Vue实例没有准备好之前隐藏没有编译的胡子*/(v-cloak) {
显示:没有;
}
* {
填充:0;
保证金:0;
}
身体{
字体:15像素/1.3开放无,无衬线;
颜色:# 5 e5b64;
text-align:中心;
}
,答:访问{
大纲:没有;
颜色:# 389 dc1;
}
答:{徘徊
文字修饰:没有;
}
部分,页脚,头,放在一边,nav {
显示:块;
}
*//*提示风格
.tooltip {
background - color: # 03 c03c;
背景图片:-webkit-linear-gradient(顶部,# 03 c03c,灰色);
背景图片:-moz-linear-gradient(顶部,# 03 c03c,灰色);
背景图片:线性渐变(顶部,# 03 c03c,灰色);
不必:0 1 px 1 px # ccc;
border - radius: 3 px;
宽度:290 px;
填充:10 px;
位置:绝对的;
左:50%;
margin-left: -150 px;
上图:50 px;
}/*小三角形*/.tooltip:{后
内容:“”;
位置:绝对的;
边界:6 px固体# 03 c03c;
边框颜色:# 03 c03c透明透明;
宽度:0;
高度:0;
底部:-12 px;
左:50%;
margin-left: 6 px;
}
.tooltip输入{
边界:没有;
宽度:100%;
行高:34 px;
border - radius: 3 px;
不必:0 2 px 6 px # bbb插图;
text-align:中心;
字体大小:16 px;
字体类型:继承;
颜色:# 8 d9395;
粗细:大胆的;
大纲:没有;
}
p {
字体大小:22 px;
粗细:大胆的;
颜色:# 6 d8088;
高度:30 px;
光标:指针;
}
b p {
颜色:# fff;
显示:inline-block;
填充:5 px 10 px;
background - color: # c4d7e0;
border - radius: 2 px;
首字母:大写;
字体大小:18 px;
}
p:{之前
内容:“& # 9998;”;
显示:inline-block;
margin-right: 5 px;
粗细:正常;
vertical-align: text-bottom;
}
#{主要
身高:300 px;
位置:相对;
padding-top: 150 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——在Vue实例准备好之前,v-vloak会隐藏任何没有编译的绑定数据——比;
& lt; !——当元素被点击后,hideTooltp()方法将被调用——比;
& lt; div id=爸饕眝-cloak v:点击=癶ideTooltip”比;
& lt; !——这是一个工具提示。
v: clock.stop是一个关联点击事件的句柄,用于停止事件。
v保证只有在showtooltip变量为真时才显示提示——比;
& lt; div类=v“提示”:点击。停止v=皊how_tooltip”比;
& lt; !- - - v模型绑定text_content模型的文本内容,对于任何文本编辑框的变化都会被自动更新——比;
& lt;输入类型="文本" name=" v模型=皌ext_content”比;
& lt;/div>
& lt; !——当p区域被点击后,会调用toggleTooltip方法,阻止事件扩散——比;
& lt; !——胡子表达式将会替换text_content的值,它将会自动更新变量值的所有变化——比;
& lt; p v: click.stop=" toggleTooltip "在{{text_content}} & lt;/p>
& lt;/div>
& lt;脚本src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞//创建一个Vue实例,并且传递一个可选对象
Vue ({var=new演示//一个DOM元素表示视图模型
埃尔:“#主”,//定义属性值,给出初始值
数据:{
show_tooltip:假的,
text_content:“点击这里进行编辑的
},//需要使用到的函数
方法:{
hideTooltip:函数(){//当模型被修改,视图将被自动更新
这一点。show_tooltip=false;
},
toggleTooltip:函数(){
这一点。show_tooltip=! this.show_tooltip;
}
}
})
& lt;/script>
& lt;/body>
& lt;/html>
以上所述是小编给大家介绍的Vue.js实现输入框绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
