<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<button id="app1" v-bind:id="idValue" v-bind:disabled="disabledStatus">
button1
</button>
<button id="app2" v-bind:id="idValue" v-bind:disabled="disabledStatus">
button2
</button>
<br />
<br />
<script>
var app1 = Vue.createApp({
data() {
return {
idValue: 'mybutton101',
disabledStatus: false
}
}
}).mount('#app1');
var app2 = Vue.createApp({
data() {
return {
idValue: 'mybutton102',
disabledStatus: false
}
}
}).mount('#app2');
function clickFunction(){
app2.disabledStatus = true;
};
</script>
<input type="button" value="button" id="mybutton" onclick="javascript:clickFunction()">
</body>
</html>
上面的代码点击最下面的按钮不能屏蔽了，我记得vue2时还好使呢