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>
// 声明一个构造函数Page()
function Page(){}
// 初始化绑定一个事件
$.extend(Page.prototype,{
init:function(){
this.bindEvents()
},
// 为button绑定事件
bindEvents:function(){
var btn = $('#btn');
btn.on('click',$.proxy(this.handleBtnClick,this))
},
// 将输入框内容添加到ul元素下
handleBtnClick:function(){
// alert('666')
var inputresult = $("#inputValue").val();
var ulValue = $("#ulEle");
ulValue.append('<li>' +inputresult+'</li>')
}
})
// 构造一个Page对象
var page = new Page();
page.init();
</script>
</body>
</html>
vue todoList
