纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

Vue之props 配置 Vue之props配置详解

王同学要努力   2021-11-21 我要评论
想了解Vue之props配置详解的相关内容吗,王同学要努力在本文为您仔细讲解Vue之props配置的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue详解,Vueprops配置,下面大家一起来学习吧。

在这里插入图片描述

<template>
  <div class="demo">
    <h1>{{ msg}}</h1>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生的年龄:{{myage+1}}</h2>
    <button @click="changeAge">点我修改数据</button>
  </div>
</template>

<script>
  export default {
    name: 'Student',
    data() {
      return {
        msg: '王者爱好者',
        myage:this.age
      }
    },
    methods: {
      changeAge(){
       this.myage=24
      }
    },
    //简单接收
   // props:['name','age','sex']


    //接收的同时对数据进行类型的限制
    //  props:{
    //    name:String,
    //    age:Number,
    //    sex:String,
    //  }

//接收数据的同时对数据:进行类型的限定+默认值的指定+必要性的限制
  props: {
      name: {
        type: String, //name的类型
        required: true, //name是必要的
      },
      age: {
        type: Number, 
       default:22
      },
      sex: {
        type: String, 
        required: true
      }
 }

  }
</script>


<template>
  <div>
    <Student name="张三" sex="男" :myage="20"/>
  </div>
</template>

<script>
  //引入Student组件
  import Student  from './components/Student.vue'
  export default {
    name: 'App',
    components: {
     Student
    }
  }

</script>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!


相关文章

猜您喜欢

  • Zookeeper分布式服务配置中心 Zookeeper怎样实现分布式服务配置中心详解

    想了解Zookeeper怎样实现分布式服务配置中心详解的相关内容吗,扯编程的淡在本文为您仔细讲解Zookeeper分布式服务配置中心的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:zookeeper集群配置,zookeeper分布式事务,zookeeper分布式服务配置,下面大家一起来学习吧。..
  • c语言实现扫雷 c语言实现含递归清场版扫雷游戏

    想了解c语言实现含递归清场版扫雷游戏的相关内容吗,Shany-Ming在本文为您仔细讲解c语言实现扫雷的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言实现扫雷游戏完整代码,c语言编写扫雷,c语言扫雷源代码,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.hss19.cn 【绿色下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式