Vue.js-样式渲染

1.练习网址：https://jsfiddle.net/chrisvfritz/50wL7mdz/

2.html代码：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
  
  <div v-if="counter%3 === 1">
    <lable style="background-color:green">green</lable>
    
  </div>
  <div v-else-if="counter%3 === 2">
    <lable style="background-color:blue">blue</lable>
  </div>
  <div v-else-if="counter%3 === 0">
     <lable style="background-color:pink">pink</lable>
  </div>
  <div v-else>
    Not A/B/C
  </div>
</div>

<p>/////////////////////////////////////////////////////</p>

<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:id="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    >
      
    </li>
  </ul>
</div>

2.js代码：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0,
    type:4
   
  }
})


Vue.component('todo-item', {
  template: '\
    <li>\
      {{ id }} .{{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['id','title']
  
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

3.效果图：

猜你喜欢