You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<!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>
|
