v-showd的用法具体例子,举两个页面隐藏或展示,具体代码
时间: 2024-02-23 12:01:47 浏览: 16
好的,下面给您举两个具体的例子,一个是通过点击按钮来隐藏或展示一个图片,另一个是根据用户的登录状态来隐藏或展示某些内容。
1. 隐藏或展示图片
HTML部分:
```html
<div>
<img src="https://picsum.photos/200" v-show="showImg">
<button @click="toggleImg">Toggle Image</button>
</div>
```
JavaScript部分:
```javascript
export default {
data() {
return {
showImg: true
}
},
methods: {
toggleImg() {
this.showImg = !this.showImg
}
}
}
```
上述代码中,页面初始状态下图片是展示的,当点击按钮时,会触发toggleImg方法,该方法会将showImg的值取反,从而实现图片的隐藏或展示。
2. 根据登录状态隐藏或展示内容
HTML部分:
```html
<div v-show="isLogin">
<p>Welcome, John Doe!</p>
<button @click="logout">Logout</button>
</div>
<div v-show="!isLogin">
<p>Please login to see the content.</p>
<button @click="login">Login</button>
</div>
```
JavaScript部分:
```javascript
export default {
data() {
return {
isLogin: false
}
},
methods: {
login() {
// 实现登录逻辑
this.isLogin = true
},
logout() {
// 实现登出逻辑
this.isLogin = false
}
}
}
```
上述代码中,页面初始状态下展示的是未登录状态下的内容,当用户点击登录按钮时,会触发login方法,该方法会将isLogin的值设置为true,从而显示登录状态下的内容。当用户点击登出按钮时,会触发logout方法,该方法会将isLogin的值设置为false,从而显示未登录状态下的内容。