Vue.js 입력 상자 바 인 딩 을 위 한 인 스 턴 스 코드
구현 코드 및 주석
<!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 가 입력 상자 에 연 결 된 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
