更改链接上的页面布局单击 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>