<!DOCTYPE html> <html> <head> <title> hello world vue </title> <meta charset="utf-8" /> </head> <body> <div id="app" v-cloak> <anchor :level="2" title="2+2">特性2</anchor> <!-- 如果是title="2+2"At this time as a title character string is variable, the result is 2 + 2 <! --> If yes: title = "2 + 2" , this time as a title is calculated variables, the result is. 4 -> < Script type = "text / X-Template" ID = "Anchor" > < div > < h1 of V - IF = " Level ===. 1 " > < A: the href = " '#' + title " > < slot > < / slot> < / A> < / h1 of> < H2 V - IF = " Level 2 === "> <a :href="'#'+title"> <slot></slot> </a> </h2> <h3 v-if="level === 3"> <a :href="'#'+title"> <slot></slot> </a> </h3> <h4 v-if="level === 4"> <a :href="'#'+title"> <slot></slot> </a> </h4> <h5 v-if="level === 5"> <a :href="'#'+title"> <slot></slot> </a> </h5> <h6 v-if="level === 6"> <a :href="'#'+title"> <slot></slot> </a> </h6> </div> </script> </div> </body> </html> <script src="jquery-3.1.1.js"></script> <script src="vue.js"></script> <script> $(document).ready(function() { }); </script> <script> Vue.component('anchor', { template: '#anchor', props: { level: { type: Number, required: true }, title: { type: String, default: '' } } }); var app = new Vue({ el: '#app', data: {}, computed: {}, methods: {}, components: {}, mounted: function() {} }); </script>