Question

我已经用vue.js创建了待办事项列表，我想在第4个列表项中添加一些图像，所以我认为正在使用v-html数组，其中包含与文本绑定的元素以及具有元素的图像，对吗？

例如）

var arr = [<div v-bind:foo><div>, 
<div v-bind:foo><div>, 
<div v-bind:foo><div>, 
<img src="..."/>]

这是待办事项列表（使用v-html之前）

https://codepen.io/Retzudo/pen/WwEMQZ

Answer 1

在列表循环中执行以下操作

<li v-for="todo in todos | orderBy 'done'">
            <del v-if="todo.done">
                {{ todo.text }}
            </del>
            <template v-else>
                {{ todo.text }}
            </template>
            <img v-bind:src="todo.image" alt="test" v-if="todo.image"/>
      <a href="" @click.prevent="todo.done = !todo.done">✓</a>
</li>

并在列表的长度上添加观察者，在该图像的最后一个待办事项中添加图像（如果它传达了第四个）：

(function () {
    new Vue({
        el: '#todo-list',
        data: {
            todos: [
                {
                    text: 'Do stuff',
                    done: false,
                    image: ''
                },
                {
                    text: 'Done thing',
                    done: true,
                    image: ''
                },
                {
                    text: 'Other stuff',
                    done: false,
                    image: ''
                }
            ]
        },
        watch: {
            todos: function (list) {
        if(list.length%4 == 0) {
        this.todos[list.length-1].image = 'https://www.w3schools.com/w3css/img_lights.jpg';
    }
}
        },
        methods: {
            new: function () {
                this.todos.push({
                    text: this.todoText,
                    done: false,
                    image: ''
                });
                this.todoText = '';
            }
        }
    });
}());

如何使用VueJS列出多个组件？

1 个答案: