可以通过 class 绑定和计算属性来实现这个需求。 首先,在模板中添加一个按钮和一个需要平移的 div,并给它们分别添加一个类名: 复制 <template> <div> <button @click="moveUp">向上移动</button> <div :class="{ 'move-up': isMovedUp }"></div> </div> </template> <style lang="scss"> .move-up { transform: translateY(-100px); } </style> 然后,在组件的计算属性中定义一个 isMovedUp 布尔值,用来判断 div 是否需要向上平移: 复制 <script> export default { data() { return { clickCount: 0, }; }, computed: { isMovedUp() { return this.clickCount % 2 !== 0; }, }, methods: { moveUp() { this.clickCount++; }, }, }; </script> 最后,在 moveUp 方法中每点击一次就将 clickCount 值加1,这样就能够实现每点击一下,div 就向上平移100px了。 复制 methods: { moveUp() { this.clickCount++; }, }, 需要注意的是,因为我们使用了计算属性来控制样式,所以在样式中需要使用动态绑定的方式,即 :class。并且为了让 div 恢复原来的位置,我们需要在样式中定义一个默认样式。 这段代码只能实现平移一次是为什么,把代码修改为可以多次点击
可以通过 class 绑定和计算属性来实现这个需求。 首先,在模板中添加一个按钮和一个需要平移的 div,并给它们分别添加一个类名: 复制 <template> <div> <button @click="moveUp">向上移动</button> <div :class="{ 'move-up': isMovedUp }"></div> </div> </template> <style lang="scss"> .move-up { transform: translateY(-100px); } </style> 然后,在组件的计算属性中定义一个 isMovedUp 布尔值,用来判断 div 是否需要向上平移: 复制 <script> export default { data() { return { clickCount: 0, }; }, computed: { isMovedUp() { return this.clickCount % 2 !== 0; }, }, methods: { moveUp() { this.clickCount++; }, }, }; </script> 最后,在 moveUp 方法中每点击一次就将 clickCount 值加1,这样就能够实现每点击一下,div 就向上平移100px了。 复制 methods: { moveUp() { this.clickCount++; }, }, 需要注意的是,因为我们使用了计算属性来控制样式,所以在样式中需要使用动态绑定的方式,即 :class。并且为了让 div 恢复原来的位置,我们需要在样式中定义一个默认样式。 这段代码只能实现平移一次是为什么
vue2中,现在有个需求,有一个按钮,现在每点击一下,div向上平移100px,怎么实现
相关推荐













