<!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案列的更多相关文章

  1. Spring MVC的配置文件(XML)的几个经典案列

    1.既然是配置文件版的,那配置文件自然是必不可少,且应该会很复杂,那我们就以一个一个的来慢慢分析这些个经典案列吧! 01.实现Controller /* * 控制器 */ public class M ...

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. SAMSUNG某型号一千短信成功记录！对比其他软件恢复不成功的案列！

    Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...

  4. php知识案列分享

    今天再跟大家分享一下,以下案列. 使用array_flip函数生成随机数,可以去掉重复值. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ...

  5. linux下mysql函数的详细案列

    MYSQL * STDCALL mysql_real_connect(MYSQL *mysql, const char *host, const char *user, const char *pas ...

  6. axis1,xfire,jUnit 测试案列+开Web Service开发指南+axis1.jar下载 代码

    axis1,xfire,jUnit 测试案列+Web Service开发指南(中).pdf+axis1.jar下载    代码 项目和资源文档+jar 下载:http://download.csdn. ...

  7. 大数据技术之_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 ...

  8. react 的安装和案列Todolist

    react 的安装和案列Todolist 1.react的安装和环境的配置 首先检查有没有安装node.js和npm node -v npm -v 查看相关版本 2.安装脚手架工具 2.构建:crea ...

  9. SpringCloud断路器(Hystrix)和服务降级案列

    断路器(Hystrix) 为什么需要 Hystrix? 在微服务架构中,我们将业务拆分成一个个的服务,服务与服务之间可以相互调用(RPC).为了保证其高可用,单个服务又必须集群部署.由于网络原因或者自 ...

随机推荐

  1. (转)Nginx静态服务配置---详解root和alias指令

    Nginx静态服务配置---详解root和alias指令 原文:https://www.jianshu.com/p/4be0d5882ec5 静态文件 Nginx以其高性能著称,常用与做前端反向代理服 ...

  2. 第十九章：UTC time和local time的互换

    通常我们服务器端的时间使用UTC格式,避免服务器的时区对最终的时间产生影响.而客户端需要根据具体的时区显示local time,本文将介绍如何将服务器的UTC time(基于asp.net web a ...

  3. 面试题 数据库sql

    一.建表的结构和数据,在sqlserver直接用就行了 USE [test] GO /****** Object: Table [dbo].[TEACHER] Script Date: 05/16/2 ...

  4. ADO.NET教程（1）初识ado.net

    ADO.NET简介 ADO.NET使用到的类 需掌握的方法和属性 ado.net连接实例 ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的 ...

  5. 【学习笔记】HTML基础：使用html制作网页

    一.初识HTML 1.什么是HTML? Hyper Text Markup Language(超文本标记语言) 扩展XML:Extendsible  Markup Language(可扩展性标记语言) ...

  6. win10x系统下的Git下载安装

    git安装和使用百度一下就有,官方地址https://git-scm.com/book/zh/v1/起步-安装-Git 但是说的并不是很详细,自己记录一下, 首先我们去官网下载一个git 有两个下载地 ...

  7. hdu 1087 最大递增和

    思路和LIS差不多,dp[i]为i结尾最大值 #include <iostream> #include <string> #include <cstring> #i ...

  8. 用于模式匹配的String方法和RegExp方法

    上一节总结了创建正则表达式的语法,这一篇笔者总结了用于模式匹配的String四个方法:search().replace().match().split()以及用于模式匹配的RegExp两个方法exec ...

  9. 2018.10.23NOIP模拟赛解题报告

    心路历程 预计得分:\(100 + 50 + (10 \sim 50)\) 实际得分:\(100 + 10 + 50\) 这可能是我打的最懵逼的一场考试没有之一.. T1两个小时才做出来也是醉了. T ...

  10. 9th week -the history of program 1950~2020

    We already know that programming language is a formal language designed to communicate instructions ...