vue案列
<!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>
运行效果：
vue案列的更多相关文章
- Spring MVC的配置文件(XML)的几个经典案列
1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...
- js闭包的作用域以及闭包案列的介绍：
转载▼ 标签: it js闭包的作用域以及闭包案列的介绍: 首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...
- SAMSUNG某型号一千短信成功记录！对比其他软件恢复不成功的案列！
Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...
- php知识案列分享
今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...
- linux下mysql函数的详细案列
MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *pas ...
- axis1,xfire,jUnit 测试案列+开Web Service开发指南+axis1.jar下载 代码
axis1,xfire,jUnit 测试案列+Web Service开发指南(中).pdf+axis1.jar下载 代码 项目和资源文档+jar 下载:http://download.csdn. ...
- 大数据技术之_14_Oozie学习_Oozie 的简介+Oozie 的功能模块介绍+Oozie 的部署+Oozie 的使用案列
第1章 Oozie 的简介第2章 Oozie 的功能模块介绍2.1 模块2.2 常用节点第3章 Oozie 的部署3.1 部署 Hadoop(CDH版本的)3.1.1 解压缩 CDH 版本的 hado ...
- react 的安装和案列Todolist
react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...
- SpringCloud断路器(Hystrix)和服务降级案列
断路器(Hystrix) 为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...
随机推荐
- Nmap原理02 - 版本探测介绍（上）
Nmap原理02 - 版本探测介绍(上) 1.介绍 本文将介绍如何通过修改或添加nmap-service-probes文件来实现对nmap中未知服务的探测,首先介绍服务和版本探测的相关信息,然后介绍服 ...
- nyoj1032——Save Princess——————【set应用】
Save Princess 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 Yesterday, the princess was kidnapped by a de ...
- 新版本火狐 ，Chrome不支持showModalDialog解决办法
平常的网站中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,在IE中,我们可以使用showModalDialog来达成,但是chrome早就不支持showModalDialog,最近 ...
- Javascript怎么跳出循环，嵌套循环。
今天要实现一个功能,在数组a中的每一项,对应数组b中的每一项,如果对应上了就给数组b的checked增加ture属性,如果查找不到就给数组b的checked增加false属性. 如果有哪里写的不对欢迎 ...
- 使用Razor
新建一个名称为Rezor的mvc空项目,定义一个模型内容 public class Product { //定义模型 public int ProductID { get; set; } public ...
- js Base64与字符串互转
1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...
- 认识Spring AOP
Spring AOP AOP是Aspect/'æspekt/ Oriented/ɔːrɪentɪd/ Programming的缩写,意为:面向切面编程. 是什么 通过预编译方式和运行期动态代理实现程序 ...
- HDU 4731 找规律,打表
http://acm.hust.edu.cn/vjudge/contest/126262#problem/D 分为3种情况,n=1,n=2,n>=3 其中需要注意的是n=2的情况,通过打表找规律 ...
- openssl命令使用
openssl openssl是个密码工具集,提供多端接口调用方式 组成: 1. 代码库 libcryto ,libssl(ssl/tls) 2. 工具集 openssl 对称加密 对称加密主要是用a ...
- 概述File i/o
1.File对象既可表示文件,也可表示目录(文件夹). 2. 创建一个File对象 File file = new File (String pathName[文件路径名]); 3.在Windows操 ...