2. 程式人生 > >vue 實現 點擊取消監控內容是否發生修改 若修改提示 是否需要保存

vue 實現 點擊取消監控內容是否發生修改 若修改提示 是否需要保存

阿新 • • 發佈：2017-05-13
.text class ext 1.0 lib scrip can script query 

<!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 實現 點擊取消監控內容是否發生修改 若修改提示 是否需要保存

相關推薦

vue 實現 點擊取消監控內容是否發生修改 若修改提示 是否需要保存

.text class ext 1.0 lib scrip can script query <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

用vue實現點擊編輯按鈕將li變為可以輸入文本的input

type else class lag data chan code edi col <template> <li v-if=‘flag‘><span @click=‘edit()‘>點擊一下</span></

vue實現點擊回到頂部

方法 點擊 isp == nbsp eve tint span 回到頂部 <template> <div class="center"> <div class="btnTop" v-if="btnFlag"

radio 實現點擊兩次 第一次點擊選中第二次點擊取消

inpu rop iou 實現 box false func div input 由於項目的需求，要求radio點擊兩次後為取消狀態，不方便修改為checkbox，可以用正面的方法實現。 // jquery $(‘input:radio‘).click(fu

JQuery實現點擊關註和取消功能

image val 便是 可見 允許 幹貨 轉發 決定 jquery插件 點贊，網絡用語，表示“贊同”、“喜愛”。 該網絡語來源於網絡社區的“贊”功能。送出和收獲的贊的多少、贊的給予偏好等，在某種程度

vue.js實現點擊後動態添加class及刪除同級class

變色 點餐 tail itl 需要 name .cn 好用 get 最近使用vue需要實現一個點餐選擇商品規格的頁面，需要通過vue動態的給被點擊的元素添加class名字，使其變色，其他的刪除class。如圖： 開始在網上找了許多辦法發現不是太好用，最後找到一個發現還是不

實現點擊頁面其他地方，隱藏div（vue）

監聽事件 listen function 頁面 比較 als 元素 點擊事件 click 方法一：　　 　　通過監聽事件 document.addEventListener(‘click‘,function(e){ if(e.target.

jQuery簡單實現點擊文本框復制內容到剪貼板上的方法

ble sta sca principal ase clas app 回車 pbo //點擊文本框復制其內容到剪貼板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.cl

vue.js 實現點擊展開收起動畫

tar 通過 blog ext mar document ML 收起 dea 最近公司項目加了個頁面，其中要求是這樣的，點擊對應列表，展開和收起， 其實就是顯示和隱藏內容部分；說來慚愧，我花了半天時間才搞出來（自黑一下~）， ，，接下來分享給大家，先上效果圖： .

用HTML和CSS實現點擊內容顯示再點擊隱藏

str har ctu box 點擊 實現 aep anti 實現思路 實現思路： 1.display:none,隱藏元素;點擊時display:black; 2.設置隱藏元素高度為0，overflow:hidden;點擊時overflow:visible; 由於第一條只能

vue 表格數據編輯，點擊取消或者完成按鈕後，關閉編輯狀態沒有及時生效

分享 inf bsp 狀態 修改 點擊 視圖 進行 解決 點擊編輯按鈕： 編輯狀態下，表格可以編輯。但是點擊“確認”或者“取消”按鈕，列數據編輯狀態已經修改，但是視圖沒有改變。 頁面代碼： 獲取當前行的index，並直接修改當前行用於判斷是否編輯狀態的數據為false

Vue中配合clipboard.js實現點選按鈕複製內容到剪下板

需求設定 點選某個按鈕，將設定的目標內容(例如下載連結地址)複製到剪下板，可以在電腦上任何地方貼上 不使用任何框架和使用Flash，以最小的程式碼實現該功能，並能相容所有主流瀏覽器 外掛選擇 clipboard.js: * `NPM方式`：`np

html中用href 實現點擊鏈接彈出文件下載對話框

就會 鏈接 pre html 支持 body 能夠 自帶 圖片 瀏覽器支持能夠打開的格式，他都會默認直接在線打開（比如word或圖片），不支持的格式，他就會彈出下載提示。最好是做成.rar格式、xlsx的文件。瀏覽器自帶下載功能。 <body> <

Servlet實現點擊計數器

lte tree master target visit 引用 pri 過濾器 web容器 以下內容引用自http://wiki.jikexueyuan.com/project/servlet/hits-counter.html： 一、Web頁面的點擊計數器 很多時候，

vue獲取點擊事件源的方法

col script -c function get com jquer current () 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <

JS實例之選項卡效果，實現點擊對應的顯示效果

http body auto 100% itl elements lis style char 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

實現點擊圖片不同區域響應不同的事件

位置 轉換 unit 點擊 yun 單元 cgpoint use float 最近有一個遙控器的項目, 需要實現點擊圖片上指定位置響應不同事件 圖片如下: 大概目的是點擊圖片上的溫度可以直接改變空調溫度 大概思路就是先通過gesture獲取點擊的點坐標, 然後對坐標做處

用Jquery來實現點擊事件等的功能

點擊事件 image alt logs ima log ges query images 用Jquery來實現點擊事件等的功能

vue實現雙擊編輯

js 實現雙擊重新編輯JS 實現雙擊編輯原始 HTML代碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt

php實現點擊文字提交表單並傳遞數據至下一個頁面

asc div echo data -- 提交表單 blog 類型 使用 <?php $id="4";//等會要把這個數據傳到第二個頁面 ?> <?php echo "<li>";