为什么vuejs里面定义的template 里面定义的多个元素只显示一个
<divid="app"><counterheading="Likes"color="green"></counter><counterheading="Dislikes...
<div id="app">
<counter heading="Likes" color="green"></counter>
<counter heading="Dislikes" color="red"></counter>
</div>
<template id="counter_template">
<h1>{{heading}}</h1>
<button @click="count+=1" style="background:{{color}}">{{count}}</button>
</template>
<script src="vue.min.js"></script>
<script>
Vue.component('counter',{
template:'#counter_template',
props:['heading','color'],
data:function(){
return {count:0} //每个组件返回全新的数据对象
}
})
new Vue({
el:'#app'
})
</script> 展开
<counter heading="Likes" color="green"></counter>
<counter heading="Dislikes" color="red"></counter>
</div>
<template id="counter_template">
<h1>{{heading}}</h1>
<button @click="count+=1" style="background:{{color}}">{{count}}</button>
</template>
<script src="vue.min.js"></script>
<script>
Vue.component('counter',{
template:'#counter_template',
props:['heading','color'],
data:function(){
return {count:0} //每个组件返回全新的数据对象
}
})
new Vue({
el:'#app'
})
</script> 展开
1个回答
展开全部
1、vuejs里面定义的template里面定义的多个元素只显示一个
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rendlist</title>
<style>
.finished{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<task-app :list="tasks"></task-app>
<task-app :list="[{body:'vue',finished:false}]"></task-app>
</div>
<template id="task-template">
<h1>
my tasks({{list.length}})
剩余的tasks<span v-show="remaining">({{remaining}})</span>
</h1>
<div>
<ol>
<li
@click="toggle(task)"
2、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rendlist</title>
<style>
.finished{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<task-app :list="tasks"></task-app>
<task-app :list="[{body:'vue',finished:false}]"></task-app>
</div>
<template id="task-template">
<h1>
my tasks({{list.length}})
剩余的tasks<span v-show="remaining">({{remaining}})</span>
</h1>
<div>
<ol>
<li
@click="toggle(task)"
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
