把代码贴进来
https://www.runoob.com/try/try.php?filename=vue2-example-4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js 搜索页面</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
table{
margin:20px auto;
border-collapse: collapse;
}
td,th{
width: 100px;
height: 40px;
border-bottom:1px solid #999;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th><button @click="quanxuan">全选</button></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th><button>删除</button></th>
</tr>
<tbody v-bind:class="{solids:items.stat}" v-for="(items,key) in arr">
<tr >
<td><input type="checkbox" v-model="items.stat"></td>
<td>{{key+1}}</td>
<td>{{items.name}}</td>
<td>{{items.age}}</td>
<td><button v-on:click="del(key)">删除</button></td>
</tr>
</tbody>
<tr><td colspan="5"><button v-on:click="qk">清空</button></td></tr>
</table>
<div id="add">
<h3>添加</h3>
<form action="">
<label for="">姓名</label>
<!-- 绑定输入的值 -->
<input type="text" v-model="val" value=""><br>
<label for="">年龄</label>
<!-- 绑定输入的值 -->
<input type="text" v-model="val2" value="">
</form><br>
<button @click="Add">添加</button>
</div>
</div>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
// 初始化
val:"",
val2:"",
Age:"",
arr:[
{
age:"22",
name:"张三"
},{
age:"11",
name:"李四"
}
],
},
methods:{
Add:function(){
// 输入框的输入数据非空时
if(!(this.val=="")){
//拿到数据，创建对象，将数据融合到数组items中
var newarr ={}
newarr.name=this.val;
newarr.age=this.val2;
newarr.stat=false
this.arr.push(newarr) //将整合好的数据对象放到数组中去
this.val="" //清空文本框
this.val2=""
console.log(this.val2)
}else{
alert("请输入数据，输入不能为空！");
}
},
del:function(key){
this.arr.splice(key,1);
},
// 清空功能
qk:function(){
var gaga = this.arr
// 设置一个容器用来装没有被选中的数组
var rongarr = []
for(var i=0;i<gaga.length;i++){
if(gaga[i].stat==!true){
// gaga.splice(i,1)
// 将没有选中的放到一个数组rongarr中
rongarr.push(gaga[i])
};
};
// 给arr重新赋值为rongarr
this.arr = rongarr
},
quanxuan:function(){
var checkBox = this.arr
for(var i=0;i<checkBox.length;i++){
checkBox[i].stat=true;
}
},
}
})
</script>
</body>
</html>
分享到：
相关推荐
QT自定义界面生成器是一款专为Qt开发人员设计的实用工具，它简化了创建和定制用户界面的过程。这款软件提供了一种直观的方式，使开发者能够快速构建和个性化七种预设的界面模板，同时允许在这些基础上进行进一步的...
Ext界面生成器 Ext界面生成器 Ext界面生成器
extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器
Ext界面生成器Ext界面生成器Ext界面生成器Ext界面生成器
例如，InterfaceTemplate元素可能代表了整个界面的模板，BasAttrib可能包含了界面的基本属性信息，而ComposeUseCase则可能与组合用例有关，这些元素共同构成了软件界面生成的基础。 文章中也提及了Visual Basic（VB...
EXT界面生成器是一款基于EXT JS库的工具，用于快速、便捷地构建用户界面。EXT JS是一个强大的JavaScript框架，专门用于创建富互联网应用程序（RIA）。它提供了丰富的组件库，包括网格、表格、图表、窗体等，使开发者...
Ext界面生成器,很好的工具，欢迎下载。
无界面生成地图缓存是指在没有用户界面的情况下，通过编程方式自动化地创建和管理地图的预渲染图像，这种技术通常用于服务器端，以提升大规模用户访问时的地图加载速度。本范例主要涉及SuperMap iServer平台，它是一...
Ext界面生成器是一款强大的开发工具，专为使用Ext框架进行Web界面构建的开发者设计。它极大地简化了界面创建过程，通过自动化的方式自动生成界面代码，从而节省开发者的时间和精力，提高工作效率。对于初学者和经验...
一个Ext界面速度生成的小工具 拖曳式的控件环境 可以帮你快速的开发出界面代码
基于动软代码生成器，自己做的2个模板，选择数据库的一个表（视图、存储过程）后，可以自动生成devexpress的gridview数据列，也可以生成单行编辑时的界面，大大节省时间并避免错误。 需要：动软代码生成器、...
2. **数据绑定（Data Binding）**：生成的代码会设置好控件与数据库字段的绑定，确保用户在界面上的操作能实时反映到数据层。例如，使用`BindingSource`组件来链接数据源，并通过`DataGridViewTextBoxColumn`、`...
QT界面皮肤生成器Qss是一款基于QT框架的实用工具，专为开发者设计，用于创建和编辑应用程序的用户界面皮肤。该工具允许用户自定义程序界面的格式和颜色，以达到个性化的效果，而无需深入源代码层面进行修改。生成的...
Ext 通过界面生成代码 生成器 Ext 通过界面生成代码 生成器
成品模块主题区没有发帖权限，就扔这里了。最新版的黑月界面类 3.8.7。黑月界面类 3.8在正常使用时会提示...黑月界面生成模块 。支持多窗口的生成 。支持到了现在最新的界面类模块。@smshiwadai。Tags：黑月界面类。
【Python微信聊天界面生成器改编版】是一款基于Python编写的工具，主要用于自动化生成模拟微信聊天对话的图片，进而可以用于创建具有趣味性的段子视频。这个工具极大地简化了手动制作此类图片的过程，使得用户能够...