Vue2.0实例双向数据绑定
程序员文章站
2024-03-11 16:32:55
...
结果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双向数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
[v-cloak]{
display:none;
}
*{
margin:0;
padding:0;
}
body{
font-family:Microsoft YaHei;
text-align: center;
}
li{
list-style:none;
}
#main{
height:300px;
position:relative;
padding-top:150px;
}
.tooltip{
background-color:#5c9bb7;
border-radius:3px;
width: 280px;
padding:10px;
position: absolute;
left:50%;
margin-left:-150px;
top:80px;
}
.tooltip:after{
content: '';
position: absolute;
border:6px solid #5190ac;
border-color: #5190ac 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: #8d9385;
font-weight: bold;
outline:none;
}
p{
font-size: 22px;
font-weight: bold;
color:#6d8088;
height:30px;
cursor: pointer;
}
p:before{
content:'✎';
display: inline-block;
margin-right:5px;
font-weight:normal;
vertical-align: text-bottom;
}
</style>
<body>
<div id="main" v-cloak @click="hideTooltip">
<div class="tooltip" v-if="show_tooltip" @click.stop><!--修饰符.stop应该放在需要阻止冒泡的位置上。-->
<input type="text" v-model="text_content"/>
</div>
<p @click.stop="toggleTooltip">{{text_content}}</p>
</div>
</body>
<script type="text/javascript">
var demo=new Vue({
el:'#main',
data:{
show_tooltip:false,
text_content:'Edit me.'
},
methods:{
hideTooltip:function(){
this.show_tooltip=false;
},
toggleTooltip:function(){
this.show_tooltip=!this.show_tooltip;
}
}
})
</script>
</html>上一篇： kubectl get命令
下一篇： PHPstorm快捷键(分享)