vue中props的使用

曾经终败给现在 2022-09-10 13:22 183阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
    <div id="app">
      <ul>
        <li v-for="value in object">
        {
       { value }}
        </li>
      </ul>
    </div>
     
    <script>
    const app = {
      data() {
        return {
          object: {
            name: '菜鸟教程',
            url: 'http://www.runoob.com',
            slogan: '学的不仅是技术，更是梦想！'
          }
        }
      }
    }
     
    Vue.createApp(app).mount('#app')
    </script>
    </body>
    </html>

![在这里插入图片描述][9a4517a2d9d44a8db0bed9684d91dc93.png]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]

https://www.runoob.com/vue3/vue3-components.html

https://www.runoob.com/try/try.php?filename=vue3-v-for-obj

[9a4517a2d9d44a8db0bed9684d91dc93.png]: /images/20220829/72fec313ae8646edafe0ca83ea05157e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/c8604283e2e14ffa974e640c93851271.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/24d0f8d2a3f04d1588d95286ca45960b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue：Prop验证的使用

习笔记，欢迎大家一起交流学习n(\*≧▽≦\*)n ![20190918141309934.png][] html: <div id="component5...

Dear 丶/ 2024年04月19日 12:41/ 0 赞/ 67 阅读

相关 29 Vue中的Non-props使用$attrs & inheritAttrs

\[组件\]Vue中的Non-props使用技巧阐述基础页面和子组件的准备初始 Non-props 属性 inheritAttrs 属性

约定不等于承诺〃/ 2023年10月06日 20:37/ 0 赞/ 15 阅读

相关 Vue--props--使用/教程/实例

原文网址：[Vue--props--使用/教程/实例\_IT利刃出鞘的博客-CSDN博客][Vue--props--_IT_-CSDN] 简介说明本文用示例介绍V

以你之姓@/ 2023年10月01日 12:18/ 0 赞/ 7 阅读

相关 vue中prop的用法

prop的大小写 HTML 中的 `attribute` 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelC

骑猪看日落/ 2023年03月01日 09:04/ 0 赞/ 151 阅读

相关 Vue - Prop

推荐：[Vue汇总][Vue] Vue - Prop 如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue - Vue] Prop 的大小写

短命女/ 2022年12月20日 12:58/ 0 赞/ 176 阅读

相关 vue中props的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例

曾经终败给现在/ 2022年09月10日 13:22/ 0 赞/ 184 阅读

相关 vue中props的默认写法

默认写法 props: { rowClick: { type: Function, default: fu

╰+哭是因爲堅強的太久メ/ 2022年04月25日 05:44/ 0 赞/ 222 阅读

相关 Vue使用props传递数据

1. Vue使用props传递数据组件不仅仅是用来进行内容的复用，更重要的是组件之间的要进行通信。通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，子

素颜马尾好姑娘i/ 2021年09月27日 14:28/ 0 赞/ 562 阅读

相关 Vue Prop

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

向右看齐/ 2021年08月19日 19:30/ 0 赞/ 376 阅读

相关 Vue 中的props

如果props始终获取不到传过来的值，考虑是否props写多了一个！！！！！！ <template> <div> { {pr

╰+哭是因爲堅強的太久メ/ 2021年07月25日 17:01/ 0 赞/ 411 阅读