検索

ホームページ  >  に質問  >  本文

javascript - 学习vue.js组件使用props属性报错,按照官方文档写,但报错

代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<code> <p id="box6">

      <my-component2 :showInfor="hello"></my-component2>

      <my-component2 :showInfor="hi"></my-component2>

 </p>

  

 <script type="text/javascript">

     Vue.component('my-component2',{

          props: ['showInfor'],

          template: "<p><h4>{{showInfor}}</h4></p>",

          computed: {

            showInforRes: function(){

              return this.showInfor+" world!"

            }

          }

        })

        var com2 = new Vue({

          el: '#box6'

        })

</script>

</code>

报错如下

PHP中文网PHP中文网2842日前680

全員に返信(2)返信します

  • 迷茫

    迷茫2017-04-11 13:21:36

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    <code><p id="box6">

        <my-component2 show-infor="hello"></my-component2>

        <my-component2 show-infor="hi"></my-component2>

    </p>

     

    <script type="text/javascript">

        Vue.component('my-component2',{

            props: ['showInfor'],

            template: "<p><h4>{{showInfor}}</h4></p>",

            computed: {

                showInforRes: function(){

                    return this.showInfor+" world!"

                }

            }

        })

        var com2 = new Vue({

            el: '#box6'

        })

    </script></code>

    //说明:属性前去掉冒号,冒号表面是动态属性。同时改成-链接形式,不要驼峰形式,这是推荐标准写法。

    返事
    0
  • 怪我咯

    怪我咯2017-04-11 13:21:36

    不认识英文吗……下面说的那么清楚的…………

    hellohi没有定义。

    返事
    0
  • キャンセル返事