Vue.js 带有锚标签的VueJS @click

#Navbar for selecting content
<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
        <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
      </ul>
</div>

#Page content
<div id="page-content-wrapper">
 <div class="main-content" id="app" v-cloak>

  <div class="container-fluid" v-if="selectedPage === 'Foo'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>

  <div class="container-fluid" v-if="selectedPage === 'Bar'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>
 </div>
</div>

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo',
  }
})

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo'
  }
});

#app {
  display: flex;
}

#sidebar-wrapper {
  border-right: solid thin black;
  margin-right: 15px;
  padding-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
      <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
    </ul>
  </div>

  #Page content
  <div id="page-content-wrapper">
    <div class="main-content" id="app" v-cloak>

      <div class="container-fluid" v-if="selectedPage === 'Foo'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Foo section
      </div>

      <div class="container-fluid" v-if="selectedPage === 'Bar'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Bar section
      </div>
    </div>
  </div>
</div>

Vue.js相关问答推荐

Vue路由路径匹配行为

VueUse onClickOutside不支持右键单击

v-model 修饰符返回空

vue js如何将布尔值传到数据库

从数据库中删除后，Vue.js $remove 不删除元素

如何 for each 用户分组聊天消息？

VueJS：如何在组件数据属性中引用 this.$store

Object.assign 没有正确复制

[Vue 警告]：渲染函数中的错误：TypeError：无法读取属性 'first_name' of null

包含 Vue.js v-if 和 v-for 指令的 HTML 标签在加载时flash

如何在 vuejs 中异步加载图像 src url？

如何在 Vue.js 中传递 $router.push 中的数据？

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

验证子组件Vue vee-validate

Vue路由保持活动和挂载行为

动态注册本地 Vue.js 组件

在加载数据之前触发mounted方法 - VueJS

未在实例上定义，但在渲染期间引用

Vue.js 3 - 替换/更新react性对象而不会失go react性

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里？