任务列表中，有多个可选项，直接单击进行修改。功能实现。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue1-0918</title>
<style>
.color1{
color: skyblue;
}
.deletedline{
background: #ccc;
color: red;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>vue测试！</h1><br>
<div id="div1">
<h1>这是view层</h1>
<h2>测试：双向绑定!</h2>
<h2>{{message}}</h2>
<h2>{{teacherListJson[0].name}}</h2>
<br>
message<input type="text" v-model="message" name="msg"><br>
obj.name<input type="text" v-model="obj.name" name="name"><br>
jsonList<input type="text" v-model="teacherListJson[0].name" name="jsonlist1">
<h2>测试：button.click方法、监听事件</h2>
<button @click="fn1">测试message</button>
<button @click="fn2('abc')">测试btn的传参</button>
<br>
<h2>测试：if语句</h2>
<h3 v-if="isComeBack">你快回来</h3>
<h3 v-if="!isFinished">活没干完呢</h3>
<h3 v-else>活干完了</h3>
<h3>---------------------------------</h3>
<h3 v-if="obj.age>17">你成年了:{{obj.age}}岁了。</h3>
<br>
<h2>测试v-show</h2>
<h3 v-show="obj.age>20">你是未成年人：才{{obj.age}}</h3>
<!--<h3 v-else>{{obj.age}}岁了，老大不小了</h3>-->
<h2>测试v-for</h2>
<table>
<thead style="color: blue;background-color: coral">
<th>行号</th>
<th>Id号</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr v-for="(item,index) in teacherListJson">
<td>{{index+1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
<h2>测试：v-bind</h2>
<h3>数据分页行 示例</h3>
<h3>
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber===n+1?'active':''">{{n}}</a>
</li>
</ul>
</h3>
<h2>综合测试</h2>
<h3>
</h3>
</div>
<div id="div2">
<h3>测试：任务列表</h3>
<p>任务数：{{todoList.length}}，还有{{countLeavingRows()}}个未完成 <button @click="delRowMore()">删除</button></p>
<ul style="list-style: none">
<li v-for="(item,index) in todoList" v-bind:class="{deletedline:item.isDo}" >
<input type="checkbox" v-model="item.isDo">
<!--默认显示项-->
<span v-show="item.isEdit" v-text="item.desc" @click="toggleShowModify(index)"></span>
<!--修改栏，先隐藏-->
<input v-show="!item.isEdit" type="text" v-model="item.desc" @blur="item.isEdit=true">
</li>
<input type="text" v-model="newLine.desc">
<button @click="addRow()">添加一行</button>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
<!--这是model层的数据-->
var exampleData={
isComeBack:true,
isFinished:false,
message:'hello world!',
arr1:["吃饭","睡觉","打恒大"],
obj:{name:'tom', age:18},
teacherListJson:[{id:21,name:"jack陈",age:19},{id:32,name:"司马青云",age:26},{id:63,name:"jackson",age:28}],
activeNumber:0,
pageCount:10
};
// ViewModel vue实例1
var v1= new Vue({
el:'#div1',
data: exampleData,
methods:{
fn1:function(){
console.log("fn1,clicked!");
alert(this.message);
},
fn2:function(msg){
console.log("传入的参数是:"+ msg);
alert("传入的参数是:"+ msg);
},
createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson对象后，重置newPerson对象
this.newPerson = {name: '', age: 0, sex: 'Male'}
},
deletePerson: function(index){
// 删一个数组元素
this.people.splice(index,1);
},
}
});
//v2：任务列表
var v2Data={
isShowline:true,
lineInfo:'',
v2Arr:["吃饭","睡觉","打恒大"],
newLine:{id:0,desc:'',isDo:false}, //单行任务
todoList:[{id:21,desc:"接人",isDo:false,isEdit:true},{id:22,desc:"送人",isDo:false,isEdit:true},{id:26,desc:"打人",isDo:false,isEdit:true}]
};
var v2= new Vue({
el:'#div2',
data: v2Data,
methods: {
addRow: function(){
this.todoList.push(this.newLine); //增加一行
// newLine，重置newLine对象
this.newLine = {id:0,desc:'',isDo:false}
},
delRow:function (index) {
this.todoList.splice(index); //删除一行
},
delRowMore:function () {
//删除多行
for (var i=this.todoList.length-1;i>=0;i--){
console.log(i);
console.log("isDo:"+ this.todoList[i].isDo);
if (this.todoList[i].isDo){
this.todoList.splice(i,1);
}
}
},
countLeavingRows:function () {
var num=0;
this.todoList.forEach(function (item) {
if (!item.isDo){
num++;
}
}
)
return num; //有几个被选中
},
toggleShowModify(index){
console.log("click!!!")
// this.isShowline=false; //显示 修改栏
console.log("index:"+ index);
console.log("isEdit:"+ this.todoList[index].isEdit);
this.todoList[index].isEdit=false;
},
}
});
</script>
</html>
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
