上述代码中 添加vue代码,点击按钮可以控制展品详情页面的显示与隐藏。
时间: 2024-02-22 22:55:00 浏览: 21
好的,以下是修改后的代码,使用了Vue.js框架,点击按钮可以控制展品详情页面的显示与隐藏:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>热点按钮页面</title>
<style>
.button {
background-color: #ff6347;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 5px;
}
.details {
display: none;
background-color: #f2f2f2;
border: 1px solid #ddd;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<h1>热点按钮页面</h1>
<button class="button" @click="showDetails">热点按钮</button>
<div class="details" v-show="isDetailsVisible">
<h2>展品详情</h2>
<p>这是一件非常有价值的展品,具有悠久的历史和文化背景。</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isDetailsVisible: false
},
methods: {
showDetails: function() {
this.isDetailsVisible = !this.isDetailsVisible;
}
}
});
</script>
</body>
</html>
```
在这个修改后的HTML页面中,我们引入了Vue.js框架,并在`<div>`标签中添加了一个`id`属性值为`app`,这将成为Vue实例的挂载点。我们还添加了一个`<div>`标签,其中包含展品详情的内容,并添加了一个`v-show`指令来控制其显示和隐藏。我们还在按钮的`<button>`标签中添加了一个`@click`事件处理函数,它会触发`showDetails`函数,该函数会将`isDetailsVisible`属性的值取反,从而实现展品详情的显示和隐藏。最后,我们在`<script>`标签中创建了一个Vue实例,该实例将`isDetailsVisible`属性初始化为`false`,并定义了一个`showDetails`函数来控制展品详情的显示和隐藏。