vue使用动态绑定style显示隐藏dive
时间: 2023-07-27 09:21:37 浏览: 67
可以使用 Vue 的动态绑定语法 `v-bind` 或者简写的 `:` 绑定一个 `style` 对象来实现动态显示和隐藏一个 `div`,具体实现如下:
1. 在 Vue 组件中定义一个响应式属性,用于控制 `div` 的显示和隐藏:
```javascript
data() {
return {
isDivVisible: true
}
}
```
2. 在模板中使用 `v-bind` 或者 `:` 绑定 `style` 对象:
```html
<div :style="{ display: isDivVisible ? 'block' : 'none' }">这是一个 div</div>
```
3. 可以通过修改 `isDivVisible` 的值来动态控制 `div` 的显示和隐藏:
```javascript
methods: {
toggleDiv() {
this.isDivVisible = !this.isDivVisible;
}
}
```
在上述代码中,通过点击按钮调用 `toggleDiv` 方法可以反转 `isDivVisible` 的值,从而实现动态显示和隐藏 `div`。