问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

为什么vuejs里面定义的template里面定义的多个元素只显示一个？

头像
尘埃
    20985668

    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)"
                  :class="{'finished':task.finished}"
                  v-for="task in list">
              {{task.body}} <strong @click="delete">X</strong>
          </li>
      </ol>
  </div>
</template>
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script>
    Vue.component('task-app',{
        template:"#task-template",
        props:['list'],
        methods:{
            toggle:function (task) {
                task.finished=!task.finished;
            },
            delete:function (task) {
                this.list.$remote(task);
            }
        },
        computed:{
            remaining:function (task) {
               return this.list.filter(function (task) {
                   return !task.finished;
               }).length;

            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:"java",finished:false},
                {body:"c#",finished:true},
                {body:"html",finished:false},
            ]
        },

    })
</script>
</body>
</html>

    3、图片描述

    vue.jstemplate-engine
    阅读 8.5k
    1 个回答
    得票最新
    头像
    unofficial
      1.5k51121
      ✓ 已被采纳

      • 组件模板内还要一个元素包含你的代码于是修改一下就成了

        <div>
    <h1></h1>
    <div></div>
</div>

      • 不能是用关键字delete，于是我临时修改了一个deleteFun

      • 最后就代码就是

      • computed的问题，不能使用静态属性值

      <div id="app">
    <task-app :list="tasks"></task-app>
    <task-app :list="othertasks"></task-app>
</div>
<template id="task-template">
    <div>
        <h1>
            my tasks({{list.length}})
            剩余的tasks<span v-show="remaining">({{remaining}})</span>
        </h1>
        <div>
            <ol>
                <li
                        @click="toggle(task)"
                        :class="{'finished':task.finished}"
                        v-for="task in list">
                    {{task.body}} <strong @click="deleteFun(task)">X</strong>
                </li>
            </ol>
        </div>
    </div>
</template>
<script src="http://cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script>
    Vue.component('task-app',{
        template:"#task-template",
        props:['list'],
        methods:{
            toggle:function (task) {
                task.finished=!task.finished;
            },
            deleteFun:function (task) {
                this.list.pop(task);
            }
        },
        computed:{
            remaining: function (task) {
                return this.list.filter(function (task) {
                    return !task.finished;
                }).length;
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
            tasks: [
                {body:"java",finished:false},
                {body:"c#",finished:true},
                {body:"html",finished:false},
            ],
            othertasks: [
                {body:'vue',finished:false}
            ]
        },

    })
</script>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题