专栏首页葫芦cssjshtml vue.js 父组件向子组件传值

cssjshtml vue.js 父组件向子组件传值

从App.vue向components/Users.vue传值

App.vue

<!-- 1模板:html结构 -->
<template>
  <div id="app">
    <app-header></app-header>
    <users v-bind:users="users"></users>
    <app-footer></app-footer>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>
  // 局部注册组件
  import Users from './components/Users'
  import Header from './components/Header'
  import Footer from './components/Footer'

  export default {
    name: 'App',
    data() {
      return {
        // title: "这是一个干净的脚手架项目!"
        users:[
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false},
          {name:"brownwang",position:"运维开发",show:false}]
      }
    },
    components: {
      "users": Users,
      "app-header": Header,
      "app-footer": Footer

    }
  }
</script>

<!-- 3样式:解决样式 -->
<style scoped>
  h1 {
    color: purple;
  }
</style>

Users.vue

<template>

  <div class="users">
    <h1>hello users</h1>
    <ul>
      <li v-for="user in users"
      v-on:click="user.show=!user.show">
       <h2>{{user.name}}</h2>
        <h3 v-show="user.show">{{user.position}}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "users",
 //   props:["users"],
    props:{
      users:{
        type:Array,
        required:true
      }
    },
    data() {
      return {
      }
    }
  }
</script>

<style scoped>
.users{
  width:100%;
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  ul{
    display:flex;
    flex-wrap:wrap;
    list-style-type:none;
    padding:0;
  }
  li{
    flex-grow:1;
    flex-basis:200px;
    text-align:center;
    padding:30px;
    border:1px solid #222;
    margin:10px;
  }
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • cssjshtml vue.js 传值与传引用

    葫芦
  • linux skywalking k8s部署

    葫芦
  • python 面向对象基础 访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑。

    葫芦
  • App爬虫思路

    但是我觉得不够全,首先对于一般的HTTP和HTTPS协议,通过最基本的Fiddler和Charles就可以抓包,具体方法请Google。需要保证两点:App走代...

    小歪
  • MySQL可更新视图

    可更新视图是指通过视图,来更新、插入、删除基本表中的数据。视图是一个虚拟表,即对视图的更新,实质上是更新基表。但是视图的构造很多时候是由多个表连接查询,以及结合...

    Leshami
  • MapD利用GPU 解决各产业普遍面临的大数据头痛问题

    在整部人类发展史里,过去两年应该是产生数据资料量的最高潮,而为了以视觉化的方式来呈现,以及更深入理解这些数据背后所代表的意义,MapD 提出一项由 NVIDIA...

    GPUS Lady
  • python sqlite 获取表名、表

    py3study
  • MyBatis 核心配置综述之 ParameterHandlers

    MyBatis 四大核心组件我们已经了解到了两种,一个是 Executor ,它是MyBatis 解析SQL请求首先会经过的第一道关卡,它的主要作用在于创建缓存...

    cxuan
  • 居然还有这种操作?

    一般而言我们会认为,对于任何指针p,表达式*p的含义就是取p的目标,但上题中,这三行的执行结果是:

    用户2617681
  • nginx+tomcat绑定二级域名,部署多个应用

    本文介绍在阿里云上开通二级域名,并使用单个tomcat部署多个应用和ngnix+tomcat(多个)两种方式实现多个应用的部署,以下为操作步骤。

    三哥

扫码关注云+社区

领取腾讯云代金券