<!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. IE Error: '__doPostBack' is undefined 问题解决

    突然遇到个很奇怪的BUG,翻页控件,其他浏览器一切正常,IE无法翻页,会提示 '__doPostBack' is undefined 后来搜索发现: [原文發表地址] Bug and Fix: ASP ...

  2. 迪米特法則 Law of Demeter

    又稱為"最小知識"原則, 若對Law of Demeter做一個簡單總結: 任何對象的任何方法只能調用以下對象中的方法: (1) 該對象本身 (2) 所傳入的參數對象 (3) 它所 ...

  3. CityBuilder导入OSGB，生成3DML填坑

    工具:CityBuilder 问题1:导入osgb时,中文路径报错 当导入osgb layer时,Input folder和output foder 中最好不要出现中文 否则可能报出如下错误: 日志: ...

  4. js数据类型检测小结

    在js中,有四种用于检测数据类型的方式,分别是: typeof 用来检测数据类型的运算符 instanceof 检测一个实例是否属于某个类 constructor 构造函数 Object.protot ...

  5. tomcat-dbcp数据库连接池配置以及使用时候的一些坑

    一.数据库连接池 开发的时候经常会需要对数据库进行一些操作,比如说常见的增删改查之类的,当数据量小的时候,可以直接进行操作,但是当数据量增多的时候,每一次连接以及释放数据库都会耗费一定的时间,这个时候 ...

  6. asp.net5中使用NLog进行日志记录

    asp.net5中提供了性能强大的日志框架,本身也提供了几种日志记录方法,比如记录到控制台或者事件中等,但是,对大部分程序员来说,更喜欢使用类似log4net或者Nlog这种日志记录方式,灵活而强大. ...

  7. 1、块：ion-item

    因为ion-item 一般写于ion-list里 所以在ion-list里面我会仔细讲解. 1. ion-badge /* --- page1.html ---*/ <ion-navbar *n ...

  8. 02.switch的使用

    基本语法: switch-case语法: switch(表达式/变量) { case 值1: 语句块1; break; case 值2: 语句块2; break; default:语句块3; brea ...

  9. [LeetCode]23. Merge k Sorted Lists合并K个排序链表

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  10. 卸载Gac里被windows installer所reference的assembly的方法

    HKEY_LOCAL_MACHINE\Software\Classes\Installer\Assemlies\Global下找到要删除的assembly的那一项, 删除. 然后再gacutil /u ...