使用HTML+JavaScript实现创建两个按钮,分别为“京东”与“天猫”,使用Vue.js的属性绑定实现点击按钮切换为“京东”与“天猫”的超链接地址,点击链接跳转到相应页面。
时间: 2024-09-09 18:04:00 浏览: 84
在HTML中,我们可以创建两个按钮,每个按钮关联一个Vue组件的data属性,代表当前显示的超链接地址。然后利用JavaScript和Vue.js的数据绑定功能,实现按钮的点击事件处理。
首先,在HTML部分:
```html
<div id="app">
<button @click="switchLink('jd.com')">京东</button>
<button @click="switchLink('tmall.com')">天猫</button>
<a :href="currentLink" target="_blank">{{ currentLink }}</a>
</div>
```
接下来,在Vue实例中设置数据和方法:
```javascript
new Vue({
el: '#app',
data: {
currentLink: 'jd.com', // 初始链接为京东
links: { jd: 'jd.com', tmall: 'tmall.com' } // 链接字典
},
methods: {
switchLink: function (target) {
this.currentLink = this.links[target]; // 当点击按钮时,更新currentLink
}
}
})
```
在这个例子中,当点击“京东”按钮时,`switchLink`方法会将`currentLink`指向`links`对象里的"jd.com",同理点击“天猫”按钮会指向"tmall.com"。同时,通过`:href`属性绑定,当前的`currentLink`值会被动态应用到<a>标签上,用户点击链接时就会跳转到对应的页面。
阅读全文