代码
<!doctype html>
<html class="no-js"><head><meta charset="utf-8"><title>锚点</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/css/amazeui.min.css"><meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1, user-scalable=no"><meta http-equiv="Cache-Control" content="no-siteapp" /></head><body><div id="app"><ul class="am-nav am-nav-pills am-nav-justify"><li v-for="key in Object.keys(messages)" :key="key"><a :href="'#' + key">{{ key }}</a></li></ul><div v-for="(msgs, name) in messages" :key="name"><a :name="name">{{ name }}</a><p>{{msgs.msg}}</p></div></div><script>const App = {data() {return {messages: {"ONE": {"msg": "ONEONE"},"TWO": {"msg": "TWOTWO"}},}},};Vue.createApp(App).mount('#app');</script></body>
</html>
图片
