这是一个VUE 使用模板的小例子
需要把源码复制到下面的网址，来查看效果
http://www.runoob.com/try/try.php?filename=vue2-hw
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-Temp></my-Temp>
<hr />
<my-Temp></my-Temp>
<hr />
<th-Temp></th-Temp>
<hr />
<my-For></my-For>
</div>
<script type='text/x-template' id='myTemp1'>
<div>
{{ myv }}
</div>
</script>
<script type='text/x-template' id='myTemp2'>
<div style='color:red;'>
我是一个红颜色的：{{ mycolorText }}
</div>
</script>
<script type='text/x-template' id='myTemp3'>
<div >
<ul>
<li v-for="(v,k) in news">
{{v.title}}
<button @click="del(k)">删除</button>
</li>
</ul>
</div>
</script>
<script>
var myTemp = {
template:'#myTemp1',
data(){
return {
myv:'I am myv6666666'
}
}
};
var thTemp = {
template:'#myTemp2',
data(){
return {
mycolorText:'Thanks'
}
}
};
var myFor={
template:'#myTemp3',
data(){
return {
news:[{id:1,title:'我是新闻标题一'},{id:2,title:'我是新闻标题二'},{id:2,title:'我是新闻标题三'}]
}
},
methods:{
del:function(k){
alert(k);
}
}
}
new Vue({
el: '#app',
components: {myTemp,thTemp,myFor}
})
</script>
</body>
</html>
3815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
