Vue 구현 카운터 사례
효과:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
#app{
text-align: center;
margin: 0 auto;
line-height: 500px;
}
#app input{
width: 50px;
height: 40px;
font-size: 20px;
border-radius: 5px;
outline: none;
/* */
border: 1px solid transparent;
background-color: blue;
line-height: 30px;
color: white;
}
#app span{
padding: 20px 20px;
border: 1px;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="-" @click="sub"/>
<span>{{num}}</span>
<input type="button" value="+" @click="add"/>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods:{
add: function(){
if(this.num<10){
this.num++;
}else{
alert(" !");
}
},
sub: function(){
if(this.num>0){
this.num--;
}else{
alert(" !");
}
}
}
})
</script>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
