<!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"，此时title被当成字符串变量，结果还是2+2 --> <!-- 如果是:title="2+2"，此时title被当成计算变量，结果是4 --> <script type="text/x-template" id="anchor"> <div> <h1 v-if="level === 1"> <a :href="'#'+title"> <slot></slot> </a> </h1> <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>