代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : false,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
v-if
这个vue事件是来进行判定事件，可以看到seen我设置的是false,所以页面不会显现出来。
@click
这是一个点击是会触发的事件修饰符。
@click.stop是为了防止点击冒泡。
如果没用这个，而单纯使用@click就会出现
如果使用了就会出现：
这就是@click.stop的意义。
methods
在vue创建的实例中加入methods{},是一个模板上规则的要求，在这里面添加函数，将函数都归类在里面，可以使代码更见简洁明了。
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
