使用HTML+JavaScript+Vue.js实现创建两个按钮,分别为“京东”与“天猫”。点击按钮,切换为“京东”与“天猫”的超链接地址。点击链接跳转到相应页面。
时间: 2024-09-10 22:06:48 浏览: 63
要在网页上使用HTML、JavaScript和Vue.js实现这个功能,首先需要设置基础的HTML结构,然后引入Vue.js,并利用组件化思想编写 Vue 实例。以下是详细的步骤:
1. 创建基本HTML结构:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮切换</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
</head>
<body>
<div id="app">
<button v-bind:class="{ 'jd-btn': active === 'jd', 'tmall-btn': active === 'tmall'}" @click="switchButton('jd')">京东</button>
<a :href="url" target="_blank">{{ buttonText }}</a>
</div>
<script src="main.js"></script>
</body>
</html>
```
2. 编写`main.js`文件,引入Vue实例并定义数据和方法:
```javascript
new Vue({
el: '#app',
data: {
active: 'jd', // 初始状态为京东
url: 'http://jd.com', // 京东链接
buttonText: '京东'
},
methods: {
switchButton: function(buttonName) {
this.active = buttonName;
if (buttonName === 'jd') {
this.buttonText = '京东';
this.url = 'http://jd.com';
} else {
this.buttonText = '天猫';
this.url = 'http://tmall.com'; // 天猫链接
}
}
}
});
```
在这个例子中,我们使用了Vue的v-bind:class指令来动态改变按钮的样式,当用户点击按钮时,会触发`switchButton`方法,更新`active`、`buttonText`和`url`的数据,从而实现链接的切换。
阅读全文