<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue对象变化测试</title>
    <script src="http://cdn.bootcss.com/vue/1.0.28/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <style>
        .active{
            color:#f00;
        }
    </style>
</head>
<body>
    <div id="page">
        <!-- tap按钮 -->
        <div>
            <button  :class="{active:current==1}" @click = "current = 1">按钮01</button>
            <button  :class="{active:current==2}" @click = "current = 2">按钮02</button>
        </div>

        <!-- 内容1 -->
        <div  v-if="current == 1">
            <input type="text" v-model="msg.name">
            <input type="text" v-model="msg.age">
            <input type="text" v-model="msg.sex">
        </div>

        <!-- 内容2 -->
        <div  v-if="current == 2">
            <input type="text" v-model="text.name">
            <input type="text" v-model="text.age">
            <input type="text" v-model="text.sex">
        </div>

        <div :do="jc" :do2="jc02">{{jc|json}}---{{jc02|json}}</div>

        <button @click="cancel">取消</button>
    </div>
    <script>
        var vm = new Vue({
            el:'#page',
            data:{
                msg:{},
                text:{},
                current:1
            },
            methods:{
                cancel:function(){
                    if(this.jc || this.jc02){
                        alert("方案基准内容已修改，是否需要保存？")
                    }
                }
            },
            computed:{
                'jc':function(){
                    if($.trim(this.msg.name) || $.trim(this.msg.age) || $.trim(this.msg.sex)){
                        return this.msg;
                    }
                },
                'jc02':function(){
                    if($.trim(this.text.name) || $.trim(this.text.age) || $.trim(this.text.sex)){
                        return this.text;
                    }
                }
            }
        });
    </script>
</body>
</html>

vue 实现 点击取消监控内容是否发生修改 若修改提示 是否需要保存的更多相关文章

  1. Vue实现点击复制文本内容(原生JS实现)

    需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...

  2. vue 表格数据编辑，点击取消或者完成按钮后，关闭编辑状态没有及时生效

    点击编辑按钮: 编辑状态下,表格可以编辑.但是点击“确认”或者“取消”按钮,列数据编辑状态已经修改,但是视图没有改变. 页面代码: 获取当前行的index,并直接修改当前行用于判断是否编辑状态的数据为 ...

  3. 华为联运游戏审核驳回：在未安装或需更新HMS Core的手机上，提示安装，点击取消后，游戏卡屏（集成的6.1.0.301版本游戏SDK）

    问题描述 更新游戏SDK到6.1.0.301版本之后,游戏包被审核驳回:在未安装或需更新华为移动服务版本(HMS Core)的手机上,提示安装华为移动服务(HMS Core),点击取消,游戏卡屏.修改 ...

  4. 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容

    问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...

  5. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  6. [问题] UISearchBar 点击取消后跳动的问题

    问题详情: 首先是TableView 作为 NavigationController 的 RootViewContrller, 然后UISearchBar   添加到TableView 的 headV ...

  7. HTML5--》点击显示隐藏内容

    <details>浏览器支持比较差,可以用JavaScript实现这种功能. <!doctype html> <html> <head> <met ...

  8. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  9. Druid 配置及内置监控，Web页面查看监控内容 【我改】

    转: Druid 配置及内置监控,Web页面查看监控内容 1.配置Druid的内置监控 首先在Maven项目的pom.xml中引入包 1 2 3 4 5 <dependency>      ...

随机推荐

  1. NPOI 给导出Excel添加简单样式

    需求分析:如下图为我之前导出的Excel数据,没有一点样式,标题行不明显,各个列的数据紧凑,查看数据时得手动拉宽每列,故这次要针对以上问题对它进行优化 结果展示: 代码: /// <summar ...

  2. WPF 基础

    关于布局的规则 控件的布局应该由容器来决定,而不是通过自身使用margin之类的东西来控制位置 避免为控件定义明确的尺寸,但应该限定一个可接受的最大及最小尺寸 不要将界面元素设置成与屏幕坐标相关 容器 ...

  3. 关于Spring的69个面试问答——终极列表 （转）

    这篇文章总结了一些关于Spring框架的重要问题,这些问题都是你在面试或笔试过程中可能会被问到的.下次你再也不用担心你的面试了,Java Code Geeks这就帮你解答. 大多数你可能被问到的问题都 ...

  4. hdu1010 - dfs，奇偶剪枝

    题目链接 给一个迷宫,问从起点到终点存不存在一条长度为T的路径. ------------------------------------------------------------------- ...

  5. array_key_exists（）

    array_key_exists()方法用于检查键名是否存在数组中. <?php $a=array("name"=>"XC90","tex ...

  6. c#获取DataTable某一列不重复的值，或者获取某一列的所有值

    实现该功能是用了DataView的筛选功能,DataView表示用于排序.筛选.搜索.编辑和导航的 DataTable 的可绑定数据的自定义视图. 这里做了一个简单易懂的Demo来讲述该方法. 1.建 ...

  7. input标签type为number时，输入小数，在Firefox浏览器上输入框标红的问题

    问题一:firefox 下 默认情况 <input   type="number"> 只允许输入整数,输入小数时会报错,输入框被标红 这时候可以添加参数 step=&q ...

  8. CF1065D Three Pieces (多元最短路)

    题目大意:给你一个棋盘,你需要控制棋子依次经过编号为1~n的所有点,棋子的可以是车,马,象,都依照国际象棋的行棋方式,每走一步消耗1单位时间,但每次更换棋子都需要额外1单位时间,求经过所有点需要的最少 ...

  9. windows下安装redis以及测试 Window 下安装

    下载地址:https://github.com/dmajkic/redis/downloads. 下载到的Redis支持32bit和64bit.根据自己实际情况选择,将64bit的内容cp到自定义盘符 ...

  10. vue中使用viewerjs

    项目创建 插件Viewer.js vue init webpack mytest001 安装viewerjs npm install viewerjs 删掉生成的项目里面的helloWord.vue ...