在html中引入vue，实现点击不同的按钮有不同的内容显示

最新推荐文章于 2024-04-11 05:37:43 发布

清风挽明月°

最新推荐文章于 2024-04-11 05:37:43 发布

阅读量815

点赞数 2

分类专栏：前端文章标签： html vue.js 前端

本文链接：https://blog.csdn.net/qq_70486619/article/details/133992195

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己写的时候遇到的一点点小困难，做此记录，希望对大家有帮助

<!DOCTYPE html>
<html>
<head>
    <title>Vue Example</title>
</head>
<body>
    <div id="app">
        <button v-for="button in buttons" @click="showContent(button.content)">{{ button.label }}</button>

        <div v-if="selectedContent">{{ selectedContent }}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                buttons: [
                    { label: '按钮1', content: '内容1' },
                    { label: '按钮2', content: '内容2' },
                    { label: '按钮3', content: '内容3' }
                ],
                selectedContent: null
            },
            methods: {
                showContent(content) {
                    this.selectedContent = content;
                }
            }
        });
    </script>
</body>
</html>

在这个修改后的示例中，我们使用了`v-for`指令来动态渲染按钮，按钮的标签和内容通过`buttons`数组中的数据进行绑定。当点击按钮时，依然会触发`showContent`方法，根据按钮的`content`属性来显示不同的内容。

清风挽明月°

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
在html中引入vue，实现点击不同的按钮有不同的内容显示

在这个修改后的示例中，我们使用了`v-for`指令来动态渲染按钮，按钮的标签和内容通过`buttons`数组中的数据进行绑定。当点击按钮时，依然会触发`showContent`方法，根据按钮的`content`属性来显示不同的内容。自己写的时候遇到的一点点小困难，做此记录，希望对大家有帮助。
复制链接

扫一扫