编译的作用域

vue学习心得 专栏收录该内容
17 篇文章 0 订阅
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  这里面isShow的值来自Vue实例里面的决定的,而不是组件里面的
      因为这个组件是数据Vue实例里面的,所以首要选择的作用域是vue实例
-->
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <h2>我是标题</h2>
  <p>哈哈哈哈哈哈</p>
  <!--这里的isShow的值是来自组件的,不是Vue实例,
  因为我们定义这个是在组件里面,所以首要选择的作用域当然是组件-->
  <button v-show="isShow"></button>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊!!!',
      isShow:true
    },
    components:{
      cpn:{
        template:`#cpn`,
        data(){
          return{
            isShow:false
          }
        }
      }
    }
  })
</script>
</body>
</html>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值