用scroll-left做例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <template> <div id="app" @click="click" :scroll-left.prop="scrollLeft" @scroll="scroll"> <div class="cpn"></div> <div class="cpn"></div> </div> </template> <script> export default { data() { return { scrollLeft: 0 }; }, methods: { click() { this.scrollLeft += 20; }, scroll() { console.log(this.scrollLeft) } } }; </script> |
当div被手动滚动时，this.scrollLeft的值不会被改变；但是用js改变this.scrollLeft的值时，div会被滚动（并且触发该div的滚动事件）；如果想要实现双向绑定，则需要监听div的scroll事件，当发生该事件时，修改this.scrollLeft的值。