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).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...
随机推荐
- CVE-2018-7600-Drupal远程代码执行漏洞-Render API
今天学习一下Drupal的另一个漏洞,由于渲染数组不当造成的漏洞 poc: url:http://localhost/drupal-8.5.0/user/register?element_parent ...
- Oracle 数据类型详解
数据类型(datatype)是列(column)或存储过程中的一个属性. Oracle支持的数据类型可以分为三个基本种类:字符数据类型.数字数据类型以及表示其它数据的数据类型. 字符数据类型 CHAR ...
- 20个最受欢迎的Linux命令（转）
本文根据 commandlinefu 网站的历史排名,筛选出了前 20 个得票最高的 Linux 命令.看看你都能熟练使用了吗? 1.以 root 帐户执行上一条命令 sudo !! 2.利用 Pyt ...
- What's the difference between @Component, @Repository & @Service annotations in Spring?
@Component is equivalent to <bean> @Service, @Controller , @Repository = {@Component + some mo ...
- 动态网页开发jsp
1.动态网页的优势? ①交互性:即网页会根据用户的要求和选择而动态改变和显示内容. ③自动更新:即无需改变页面代码,便会自动生成新的页面内容. ④随机性:即当不同的时间.不同的人访问 ...
- MyBatis 中 sqlmapconfig核心标签typeAliases配置说明
标签说明 在 MyBatis 的 sql 映射配置文件中,需要使用 paramterType.resultType 来设置 sql 语句的输入输出参数,一般参数都是基本的数据类型或封装类型,但都需要声 ...
- 解决python3缺少zlib的问题
解决python3缺少zlib的问题 Table of Contents 1. 安装zlib 2. 重新编译安装python 3. 补充说明 在使用python3运行spark时,报缺少zlib的错误 ...
- 利用ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
- 标准c库函数和linux系统函数的关系
c库IO函数的工作流程 c库函数与系统函数的关系 虚拟地址空间 文件描述符
- vue——指令系统
指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 在vue中提供了一套为数 ...