0
点赞
收藏
分享

微信扫一扫

vue状态管理

月白色的大狒 8小时前 阅读 2

文章目录

前言

上节,我们学习了

  • Vue指令之v-on事件处理、事件修饰符、v-for列表渲染 点击进入上一节

本节内容

  • Vue指令之v-model双向数据绑定

1、v-model

v-model 双向的数据绑定

双向数据流(绑定)
  • 页⾯面改变影响内存(js)
  • 内存(js)改变影响⻚页⾯面

v-bind 和 v-model 的区别?

input v-model=“name”
  • 双向数据绑定 ⻚页⾯面对于input的value改变,能影响内
    存中name变量量
  • 内存js改变name的值,会影响⻚页⾯面重新渲染最新值
input :value=“name”
  • 单向数据绑定 内存改变影响⻚页⾯面改变
v-model: 其的改变影响其他 v-bind: 其的改变不不影响其他
v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
示例
    <div id='app'>
        <h3>{{num}}</h3>
        <button v-on:click.once="handleClick">+1</button>
        <div class='box' :class='{active:isActive}'></div>
        <button @click='changeClick'>切换</button>
        <input v-on:keyup.up="submit">
    </div>
效果
  • webstorm 自带的浏览器keyCode 失效
举报

相关推荐

0 条评论