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

Question

我正在学习如何使用 vue.js 我有一个共享托管计划，我只能使用 html。我正在使用 axios 和仅充当后端的远程 wordpress 安装来获取我需要的数据。我需要知道的是，如果用户单击链接并且我需要更改页面的布局，因为需要对内容进行不同的呈现，我如何使用 vue 更改 index.html 的 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

请阅读Conditional Rendering in Vue.js。

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

并在标签中添加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>