mirror of
https://github.com/vuejs/vue.git
synced 2024-11-22 04:39:46 +00:00
54 lines
1.1 KiB
HTML
54 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<script src="../../dist/vue.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- #4510 click and change event on checkbox -->
|
|
<div id="case-1">
|
|
<div @click="num++">
|
|
{{ num }}
|
|
<input type="checkbox" v-model="checked">
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var vm1 = new Vue({
|
|
el: '#case-1',
|
|
data: {
|
|
num: 1,
|
|
checked: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!-- #6566 click event bubbling -->
|
|
<div id="case-2">
|
|
<div class="panel" v-if="expand">
|
|
<button @click="expand = false, countA++">Expand is True</button>
|
|
</div>
|
|
<div class="header" v-if="!expand" @click="expand = true, countB++">
|
|
<button>Expand is False</button>
|
|
</div>
|
|
<div class="count-a">
|
|
countA: {{countA}}
|
|
</div>
|
|
<div class="count-b">
|
|
countB: {{countB}}
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var vm2 = new Vue({
|
|
el: '#case-2',
|
|
data: {
|
|
expand: true,
|
|
countA: 0,
|
|
countB: 0,
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|