<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.red{
color: red;
}
.blue{
color:blue;
}
.black{
color:black;
}
.content{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<a href="#red" :class="[isShow]">显示红色字体</a>
<a href="#blue" :class="[isShow]">显示蓝色色字体</a>
<a href="#black" :class="[isShow]">显示黑色字体</a>
<div class="content" v-if="isShow===‘red‘">
红色字体的内容
</div>
<div class="content" v-if="isShow===‘blue‘">
蓝色字体的内容
</div>
<div class="content" v-if="isShow===‘black‘">
黑色字体的内容
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
var vm = new Vue({
el:‘#app‘,
data:{
isShow:‘red‘
}
});
function hash(){
var hash = window.location.hash.slice(1);
vm.isShow = hash;
}
hash();
window.addEventListener(‘hashchange‘,hash)//事件：hashchange
</script>
</body>
</html>
原文：https://www.cnblogs.com/wss198909/p/13937201.html