todoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoList_2</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="handleClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
list:[],
inputValue:''
},
methods:{
handleClick:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
jquery todoList版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="./vue.js"></script> -->
<script src="./jquery.js"></script>
</head>
<body>
<div id="div1">
<input type="text" id="inputValue">
<button id="btn">submit</button>
<ul id="ulEle"></ul>
</div>
<script>
// 聲明一個(gè)構(gòu)造函數(shù)Page()
function Page(){}
// 初始化綁定一個(gè)事件
$.extend(Page.prototype,{
init:function(){
this.bindEvents()
},
// 為button綁定事件
bindEvents:function(){
var btn = $('#btn');
btn.on('click',$.proxy(this.handleBtnClick,this))
},
// 將輸入框內(nèi)容添加到ul元素下
handleBtnClick:function(){
// alert('666')
var inputresult = $("#inputValue").val();
var ulValue = $("#ulEle");
ulValue.append('<li>' +inputresult+'</li>')
}
})
// 構(gòu)造一個(gè)Page對象
var page = new Page();
page.init();
</script>
</body>
</html>
vue todoList
