Small white learning Vue series directory

  • 1. Introduction
  • Learn Vue 2. Instruction
  • 3. Bind Class and Style
  • Vue 4. Conditional rendering and list rendering


Conditions apply colours to a drawing

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
Copy the code

v-if VS v-show

  • v-ifInsert or delete
  • v-showIt’s visible or invisible

It is not recommended to use v-if and V-for on the same element, v-for has a higher priority than V-if (sort of like for WHERE in Swift)

The list of rendering

v-for="(item, index) in array"
Copy the code
v-for="(value, key, index) in object"
Copy the code

case

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! -- the Vue. Js v2.6.12 -- -- >
</head>
<body>

    <div id="todo-list-example">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input
                v-model="newTodoText"
                id="new-todo"
                placeholder="E.g. Feed the cat"
            >
            <button>Add</button>
        </form>
        <ul>
            <li
                is="todo-item"
                v-for="(todo, index) in todos"
                v-bind:key="todo.id"
                v-bind:title="todo.title"
                v-on:remove="todos.splice(index, 1)"
            ></li>
        </ul>
    </div>
    <hr/>

</body>

<script type="text/javascript">
    Vue.component('todo-item', {
        props: ['title'].template: '\ 
  • \ {{ title }}\ \ 
    • \ '    ,})var app = new Vue({
        el: '#todo-list-example'.// created: function() {
        // this.nextTodoId = this.todos.length + 1
        // },
        data: {
            newTodoText: ' '.todos: [{id: 1.title: 'Do the dishes' },
                { id: 2.title: 'Take out of trash' },
                { id: 3.title: 'Mow the lawn'},].nextTodoId: 4,},methods: {
            addNewTodo: function () {
            	if (!this.newTodoText) return
            
                this.todos.push({
                    id: this.nextTodoId++,
                    title: this.newTodoText
                })

                this.newTodoText = ""}}})    </script>

</html>
Copy the code