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).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...
随机推荐
- C++11并发编程：原子操作atomic
一:概述 项目中经常用遇到多线程操作共享数据问题,常用的处理方式是对共享数据进行加锁,如果多线程操作共享变量也同样采用这种方式. 为什么要对共享变量加锁或使用原子操作?如两个线程操作同一变量过程中,一 ...
- Java网站开发的一些问题以及解决（cookie消失,上传头像，js等）
1.首先是cookie的问题,很多人都是遇到了将数据存储到cookie中并且add到response之中,但是还有返回其他页面或者刷新页面cookie消失的情况,除了设置cookie的存活时间外, 还 ...
- java线程的interrupt方法
java现成的interrupt方法比较容易误导新手,它其实是不会中断(停止)当前的线程,只是标志一下当前线程的某个状态值(中断标志位),并且这个状态为只对阻塞方法(比如说: ...
- phpstorm主题设置
毫无疑问,phpstorm很好用,但是安装完成后自带的主题,丑的一匹,所以总结下如何更换主题............. 1.主题下载位置 http://www.phpstorm-themes.com ...
- hadoop 天气案例
对下面一组气温数据进行处理,得到每个月份最高的两个气温值 2018-12-12 14:30 25c2018-12-12 15:30 26c2017-12-12 12:30 36c2019-01-01 ...
- mysql应用学习-在cmd命令窗口下创建数据库和表
运行以下操作,请确认您已经正确安装和配置了mysql. 首先要运行cmd.exe,进入命令窗口. step1. 进入MySQL monitor 如果您已登录mysql,可直接进入step2;若未登录请 ...
- python的用户输入和while循环
1.函数input()工作原理 函数input()让程序暂停运行,等待用户输入一些文本.获取用户输入后,Python将其存储在一个变量中,以方便你使用. (1)获取数值可以用 int()函数 (2)求 ...
- netty笔记(一)--Demo
Netty是一个Java开源框架,用于传输数据.由server和client组成,封装了Java nio,支持TCP, UDP等协议.这里写了一Demo EchoClientHandler.java ...
- java常用API之System类
System中代表程序所在系统,提供了对应的一些系统属性信息,和系统操作.System类不能手动创建对象,因为构造方法被private修饰,阻止外界创建对象.System类中的都是static方法,类 ...
- java常用API之Calendar类
Calendar是日历类,该类将所有可能用到的时间信息封装为静态成员变量,方便获取. Calendar为抽象类,由于语言敏感性,Calendar类在创建对象时并非直接创建,而是通过静态方法创建,将语言 ...