vue知识点(v-model修饰符/key属性的作用/v-if与v-show的区别 /v-for与v-if注意事项/父子组件之间传递数据的方法/单页应用spa)

v-model修饰符

lazy

<body>

    <div id="app">

<!-- 事件修饰符.lazy不会即时的将输入框的内容存放入data -->

<input v-model.lazy="msg">

<span>{ {msg}}</span>

    </div>

    <script src="../vue.js"></script>

    <script>

        new Vue({

            el:'#app',

            data:{

                msg:'1111'

            }

        })

    </script>

</body>

 number

<body>

    <div id="app">

        <!-- 修饰符.number把string字符串转为number数字 -->

        <input type="number" v-model.number="age">

        <span>{ {age}}</span>

    </div>

    <script src="../vue.js"></script>

    <script>

        new Vue({

            el:'#app',

            data:{

                age:''

            },

            watch:{

                age(){

                    console.log(typeof(this.age));

                }

            }

        })

    </script>

</body>

 trim

<body>

    <div id="app">

        <!-- trim屏蔽空格 -->

        <input type="text" v-model.trim="msg">

        <span>{ {msg.length]}</span>

    </div>

    <script src="../vue.js"></script>

    <script>

        new Vue({

            el:'#app',

            data:{

                msg:''

            }

        })

    </script>

</body>

key属性的作用

 提升v-for渲染的效率。.

提高渲染性能。

避免数据混乱的情况出现 。

v-for中key的作用

<body>

   <div id="app">

    <button @click="lis

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值