V-for的注意事项
因为后期要用vue结尾的文件类型,所以要用动态绑定 :key="item.id"(必须是字符串和数字类型)
<tr v-for = '(item,index) in list' :key="item.id">
<td>{
{index}}</td>
<td>{
{ item.id }}</td>
<td>{
{ item.name }}</td>
</tr>
label有一个for属性比如:绑定了checkbox复选框的id增加了可操作控制区域
<input type="checkbox" id="cd1">
<label for="cd1">男</label>
表单form有一个submit事件,后接prevent则阻止默认事件
<form @submit.prevent>
</form>
添加案例,综合性很强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品牌列表案例</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<link rel="stylesheet" href="./css/brandlist.css">
</head>
<body>
<div id="app">
<!-- 卡片区域 -->
<div class="card">
<div class="card-header">
添加品牌
</div>
<div class="card-body">
<!-- 添加品牌的表单区域 -->
<form @submit.prevent="add">
<div class="form-row align-items-center">
<div class="col-auto">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">品牌名称</div>
</div>
<input type="text" class="form-control" placeholder="请输入品牌名称" v-model.trim="brand">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">添加</button>
</div>
</div>
</form>
</div>
</div>
<!-- 表格区域 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th scope="col">#</th>