vue基础

1.CRUD
代码:

<!--
我们可以通过 v-if 和 v-for 指令条件性地或循环地渲染内容。
-->

<script>
export default {
  data() {
    return {
      show: true,
      list: [1, 2, 3]
    }
  }
}
</script>

<template>
  <button @click="show = !show">Toggle List</button>
  <button @click="list.push(list.length + 1)">Push Number</button>
  <button @click="list.pop()">Pop Number</button>
  <button @click="list.reverse()">Reverse List</button>

  <ul v-if="show && list.length">
    <li v-for="item of list">{{ item }}</li>
  </ul>
  <p v-else-if="list.length">List is not empty, but hidden.</p>
  <p v-else>List is empty.</p>
</template>

效果:

2.表单绑定

Text Input

{{ text }}

Checkbox

Checked: {{ checked }}

Multi Checkbox

Jack John Mike

Checked names:

{{ checkedNames }}

Radio

One
Two
Picked: {{ picked }}

Select

Please select one A B C Selected: {{ selected }}

Multi Select

A B C Selected: {{ multiSelected }} 效果: