<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework_CapterOne</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="handleButtonClick">显示/隐藏</button>
<myp></myp>
</div>
<script>
var p = {
template:'<p v-if="seen">阿瑟反攻输入法</p>'
}
var vue = new Vue({
el:"#app",
components:{
myp:p
},
data:{
seen:false
},
methods:{
handleButtonClick:function(){
if(this.seen){
this.seen = false;
}else{
this.seen = true;
}
}
}
})
</script>
</body>
</html>
1 2 3 4 | var p = { props：['seen'] template:'<p v-if="seen">阿瑟反攻输入法</p>' } |
1 | <myp :seen="seen"></myp> |
父组件通过v-bind（简写为 “：”）来给子组件传值
子组件通过props来接受父组件的传过来的值
登录后可查看更多问答，登录/注册
课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握
了解课程
