标签：boot 测试 .text com set 对象 current logs click
<!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 实现 点击取消监控内容是否发生修改 若修改提示 是否需要保存
标签：boot 测试 .text com set 对象 current logs click
原文地址：http://www.cnblogs.com/zhujiasheng/p/6849965.html
