添加删除例子：

<div id="app">
  <input type="text" v-model="studentName" @keyup.enter="add" />
  <button @click="add">添加</button>
  <ul>
    <li v-for="(item,index) in list" :key="item.id">
      <span>名字：{{item.name}}</span>
      <button @click="del(item.id)">删除</button>
    </li>
  </ul>
  合计：<span>{{list.length}}</span>
  <button @click="clear">清空</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
  const app = new Vue({
    //element缩写
    el: "#app",
    data: {
      studentName: "",
      list: [
        { id: 1, name: "小明" },
        { id: 2, name: "小红" },
        { id: 3, name: "小白" },
      ],
    },
    methods: {
      del(id) {
        this.list = this.list.filter((item) => item.id != id);
      },
      add() {
        if (this.studentName.trim() == "") {
          alert("请输入名字");
          return;
        }
        this.list.unshift({
          id: +new Date(),
          name: this.studentName,
        });
      },
      clear(){
        this.list = []
      }
    },
  });
</script>

指令修饰符

通过“.”指明一些指令后缀：

1）按键修饰符

@keyup.enter -> 键盘回车监听

2) v-model修饰符

v-model.trim -> 去除首尾空格

v-model.number -> 如果可以转为数字，则转为数字

3) 事件修饰符

@事件名.stop -> 阻止冒泡

@事件名.prevent -> 阻止默认行为

v-bind对于样式控制的增强

语法：

:class="{类名1:布尔值, 类名2:布尔值}" 比如：

:class="{pink:true,big:true}"

:class="数组" 比如：

:class="['pink','big']"

例子：鼠标放上去文字变红色

<style type="text/css">
.red{
    color:red;
}
</style>
<div id="app">
  <ul>
    <li v-for="(item,index) in list" :key="item.id" @mouseover="btnover(index)" :class="{red:index===activeIndex}">
      {{item.name}}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.js"></script>
<script>
  const app = new Vue({
    //element缩写
    el: "#app",
    data: {
        activeIndex:0,
        list: [
            { id: 1, name: "小明" },
            { id: 2, name: "小红" },
            { id: 3, name: "小白" },
        ],
    },
    methods: {
        btnover(index){
            this.activeIndex = index;
        }
    }
  });
</script>

:style样式，比如：

:style="{width:'30%'}"