vue案列
2024-09-04 13:55:34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div2" v-bind:style="mystyle">
<section>
<h1>{{title}}</h1>
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr v-for="person in persons">
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>
<a href="#" @click="remove(person.id)">删除</a>
</td>
</tr>
</table>
</section>
<button @click="changeStyle"> 变色</button>
<div><input v-model.number="person.id" ></div>
<div><input v-model.number="person.name" ></div>
<div><input v-model.number="person.age"></div>
<button @click="submit">提交</button>
</div>
<script src="css/vues.js"></script>
<script>
var vm=new Vue({
el:"#div2",
data:{
title:'渲染数据',
persons:[{
name:'张三',
sex:'男',
id:18
},
{
name:'李四',
sex:'男',
id:22
},
{
name:'李四',
sex:'男',
id:22
},
{
name:'王五',
sex:'女',
id:38
},
],
mystyle:"color:red",
person:{id:0,name:"",sex:0}
},
methods:{
changeStyle:function(){
var colors=["green","red","yellow"];
var randColor=colors[Math.floor(Math.random()*colors.length)];
this.mystyle="color:"+randColor;
},
submit:function(){
this.persons.push({
id:this.person.id,
name:this.person.name,
sex:this.person.sex,
});
console.log(this.persons);
},
remove:function(id){
this.persons=this.persons.filter((b) => b.id != id);
}
},
watch:{
id:function(n,o){
console.log(`修改后n:${n} 修改 o:${o}`)
}
},
computed:{
revMsg:function(){
return this.msg.split("").reverse().join("");
}
}
});
</script>
</body> </html>
运行效果：
最新文章
- 去掉Win7快捷方式小箭头(win10通用)
- linux screen 命令详解
- FPGA低级建模---按键去抖动
- Android NDK学习之第一个实例---端口扫描
- phpcms 导航栏点击栏目颜色定位方法
- jQuery实例-记住登录信息
- HDU 3342 Legal or Not (图是否有环)
- 机器学习 —— 概率图模型（Homework: StructuredCPD）
- 【转】ButterKnife的使用--不错
- poj 2586 Y2K Accounting Bug (贪心)
- spring-事务实现原理
- 前两天做项目遇到了sqlserver最大连接数 Max Pool Size 的问题
- ThinkPHP框架整合phpqrcode生成二维码DEMO
- 版本控制系统-SVN（1）
- ajax-addclass
- 花了一晚上时间，终于把Python的基本用法归纳好了！
- Spring对JSON请求加解密
- BZOJ.4566.[HAOI2016]找相同字符(后缀数组 单调栈)
- Linux判断文件是否为空，不为空则打印该文件的大小
- browserify 不打包某些文件或者把公共文件提取出来教程