更改链接上的页面布局单击 vue.js

Question

我正在学习如何使用 vue.js 我有一个共享托管计划，我只能使用 html。我正在使用 axios 和仅充当后端的远程 WordPress 安装来获取所需的数据。我需要知道的是，index.html如果用户单击链接并且我需要更改页面布局，因为需要不同的内容呈现，我如何更改使用 vue 的 DOM 内容？参见示例：<div id="vue-app">  <a href="#">link to layout 2</a>  <div class="col-12">starting layout </div></div>// after the user click the link (v-on:click) the layout change<div id="vue-app">  <a href="#">link to layout 1</a>// layout change  <div class="col-6">new layout </div>  <div class="col-6">new layout </div></div>

Answer 1

您可以在脚本标记的数据隔间中有一个布尔变量，并在单击时更改它。

并在标签中放入v-if="your_bool_variable".

<div id="vue-app" v-if="layout_switch">

  <a href="#">link to layout 2</a>

  <div class="col-12">starting layout </div>

</div>

// after the user click the link (v-on:click) the layout change

<div id="vue-app" v-else>

  <a href="#">link to layout 1</a>

// layout change

  <div class="col-6">new layout </div>

  <div class="col-6">new layout </div>

</div>

在事件中取反布尔变量@click。

数据可能如下所示：

<script>

    export default {

        name: "YourComponent",

        data: () => {

            return {

                layout_switch: true

            }

        },

        methods: {

            changeLayout() {

                this.layout_switch = !this.layout_switch;

            }

        }

    }

</script>