실전(TodoList)
<!--bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"/>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"/>
<!--vue-->
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
todoval:"",
nowIndex:0,
myData:[]
},
methods:{
add:function(){ //
if(this.todoval != ''){ // todoval
this.myData.push({
todotext:this.todoval
})
this.todoval = '';
}
},
deleteList:function(){ //
if(this.nowIndex == -2){ // nowIndex -2( ), -2 , -2 else
this.myData = [];
}else{
this.myData.splice(this.nowIndex,1);
}
},
abolish:function(){ //
this.todoval = ''; // todoval
}
}
})
}
</script>
<div id="box" class="container">
<h3 class="text-center">My TodoList</h3>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-sm btn-block" data-toggle="modal" data-target="#mymodal">add</button>
</div>
</div>
<table class="table table-bordered table-hover">
<caption class="text-center">TodoList</caption>
<tr>
<th class="text-center">order</th>
<th>info</th>
<th class="text-center">delete</th>
</tr>
<tr v-for="(item,index) in myData">
<td class="text-center">{{index+1}}</td>
<td>{{item.todotext}}</td>
<td>
<button class="btn btn-danger btn-sm center-block" data-toggle="modal" data-target="#delete-modal" index="">
<span>×</span>
</button>
</td>
</tr>
<tr>
<td colspan="3" class="text-muted text-center" v-show="!myData.length">no-todolist(please enter your notes)</td>
</tr>
<tr v-show="myData.length">
<td colspan="3"><button class="btn btn-danger btn-sm btn-block" data-toggle="modal" data-target="#delete-modal">all-delete</button></td>
</tr>
</table>
<!-- -->
<div class="modal fade" role="dialog" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">
<span>×</span>
</button>
<h5 class="modal-title">please enter your notes</h5>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" v-model="todoval"/>
</div>
<p v-show="!todoval.length">Please enter content</p>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-danger" data-dismiss="modal">abolish</button>
<button class="btn btn-sm btn-primary" data-dismiss="modal">add</button>
</div>
</div>
</div>
</div>
<!-- -->
<div class="modal fade" role="dialog" id="delete-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">
<span>×</span>
</button>
<h5 class="modal-title">Are you sure about the deletion?</h5>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-danger" data-dismiss="modal">no</button>
<button class="btn btn-sm btn-primary" data-dismiss="modal">yes</button>
</div>
</div>
</div>
</div>
</div>
</code></pre>
</article>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
