• 请不要在回答技术问题时复制粘贴 AI 生成的内容
zooo
V2EX  ›  程序员

关于 vue 的一个基础小问题?

  •  
  •   zooo · Jul 22, 2018 · 3756 views
    This topic created in 2879 days ago, the information mentioned may be changed or developed.
    <td><input type="checkbox" @click="handleChecked(index)" :checked="isChecked(index)"></td>

    methods: {
    isChecked: function(index) {
    return this.list[index].status;
    },
    }


    isChecked(index)函数是如何被驱动执行的?? 是不是当 list 数组发生改变就会执行??
    19 replies    2018-07-23 10:53:29 +08:00
    zooo
        1
    zooo  
    OP
       Jul 22, 2018
    小白不懂,求解答
    zooo
        2
    zooo  
    OP
       Jul 22, 2018
    没有人吗?
    WilliamLin
        3
    WilliamLin  
       Jul 22, 2018 via Android
    @zooo watch 或 computed 了解下
    qiayue
        4
    qiayue  
    PRO
       Jul 22, 2018
    我不懂 vue
    这是一个复选框,选中或者取消选中的时候执行 isChecked
    msputup
        5
    msputup  
       Jul 22, 2018
    :checked 其实是 v-bind:checked
    就是进行了动态绑定
    上面写的很清楚了,返回的是这个 VUE 组件列表某一项的 status ( true 或 false )
    你的前面还有一个点击事件 handleChecked(index)。
    应该还有一个事件方法,点击的时候,会改变 status 的值,false->true,true->false.
    msputup
        6
    msputup  
       Jul 22, 2018
    上面写错,是 vue 组件数据中列表的某一项。
    dixeran
        7
    dixeran  
       Jul 22, 2018 via Android
    isCheck 函数里面 log 一下呗。应该是组件的依赖项改变的时候会重新调用,列表项改变或者 list 改变的时候
    luob
        8
    luob  
       Jul 22, 2018
    isChecked 这个函数是不是有问题,它好像啥也没干吧
    zooo
        9
    zooo  
    OP
       Jul 22, 2018
    @WilliamLin 知道 computed,这是别人代码中的一部分,没看懂。
    @msputup 谢谢
    大概明白了,点击的时候,先执行前面一个绑定的事件 handleChecked 函数,之后还会执行 isChecked 函数,handleChecked 函数改变状态 status,之后 isChecked 函数获取状态。
    看书上没讲,v-bind:可以绑定到一个函数上,所以以为不可以。。。
    才学,所以不懂,之前基础也不好
    谢谢各位回答。
    luob
        10
    luob  
       Jul 22, 2018
    sorry, 看错(逃
    vue 都忘完了
    qiayue
        11
    qiayue  
    PRO
       Jul 22, 2018
    果然,我靠猜的回答是错的
    zhzer
        12
    zhzer  
       Jul 22, 2018
    其实可以这么写
    :checked="list[index].status"
    noe132
        13
    noe132  
       Jul 22, 2018 via Android
    所有渲染访问到了的属性,值的改变都会触发重新渲染,无论是 method,还是 computed,跟踪的方式是访问到了 data 中某个属性定义的 getter。
    VDimos
        14
    VDimos  
       Jul 22, 2018 via Android
    input 标签 vue 进行了归一化处理的,实际上是 new
    了一个 Function 对象,然后监听了 input 相关的事件,然后用 call 或者 apply 调用这个函数
    zooo
        15
    zooo  
    OP
       Jul 22, 2018
    @noe132
    @VDimos
    谢谢回答
    SergeGao
        16
    SergeGao  
       Jul 23, 2018 via Android
    用 computed 确定可以?在 computed 里面是访问不到 this 的
    murmur
        17
    murmur  
       Jul 23, 2018
    个人感觉 vue 在处理这种函数绑定的时候绝对比想的要周全
    我在函数绑定里连 eval 这种东西都用过 处理特殊需求
    所以底线还是 vdom diff 毕竟 vdom 渲染一次性能也查不到哪里去 diff 坏了就麻烦了
    Stlin
        18
    Stlin  
       Jul 23, 2018
    @SergeGao #16 可以访问,但是不能传参
    leemove
        19
    leemove  
       Jul 23, 2018
    可以看看 vue 源码....实际上 vue 是通过 setter 来感知数据变化的,所以即使用 eval 也可以察觉.在渲染的时候触发 getter 来收集依赖.
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2900 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 56ms · UTC 15:20 · PVG 23:20 · LAX 08:20 · JFK 11:20
    ♥ Do have faith in what you're doing.