<!DOCTYPE html>
<html>
<head>
<title>change color</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<div ref='hello' @click='handleClick'>hello world</div>
</div>
<script>
var vm=new Vue({
el:'#app',
methods:{
handleClick(){
alert(this.$refs.hello.innerHTML)
}
}
})
</script>
</body>
</html>
this.$refs 获得所有的引用
<!DOCTYPE html>
<html>
<head>
<title>change color</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<counter @change='handleChange' ref='one'></counter>
<counter @change='handleChange' ref='two'></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter',{
template:"<div @click='handleClick'>{{number}}</div>",
data(){
return {
number:0
}
},
methods:{
handleClick(){
this.number++;
this.$emit('change')
}
}
})
var vm=new Vue({
el:'#app',
methods:{
handleChange(){
this.total=this.$refs.one.number+this.$refs.two.number;
}
},
data:{
total:0
}
})
</script>
</body>
</html>
3762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
