<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.main{
width:300px;
height:300px;
border:1px solid #ccc;
}
.s1{
border:1px solid #0f0;
}
.s2{
border:1px solid #d00;
}
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<script src="http://cdn.bootcss.com/vue/1.0.24-csp/vue.min.js"></script>
<div class="app" v-cloak>
<input type="text" v-model="toggle" number>
<anchored-heading :level="toggle">Hello world!</anchored-heading>
</div>
<script type="text/x-template" id="anchored-heading-template">
<div>
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-if="level === 2">
<slot></slot>
</h2>
<h3 v-if="level === 3">
<slot></slot>
</h3>
<h4 v-if="level === 4">
<slot></slot>
</h4>
<h5 v-if="level === 5">
<slot></slot>
</h5>
<h6 v-if="level === 6">
<slot></slot>
</h6>
</div>
</script>
<script>
var anchoredHeading = {
template:'#anchored-heading-template',
props: {
level: {
type: Number,
required: true
}
},
ready:function(){
alert(3)
}
}
new Vue({
el:".app",
data:{
toggle:0,
},
components:{
anchoredHeading:anchoredHeading
},
ready:function(){
}
})
</script>
</body>
</html>
