Vue案例

小案例收获

vue

表格案例

• 列表渲染的步骤：

• 找到重复出现的标签结构
• 用v-for列表渲染（v,i）in list
• 在data中提供一个数组list
• 在视图中通过插值表达式来显示

用axios特换假数据实现列表渲染：

• data里面的list数据置空
• methods里加方法，getAllBrands(),用axios发get请求
• mounted里加加载渲染，执行getAllBrands()

• 条件渲染的步骤：

• 找到使用条件渲染的标签
• 确定使用v-if 还是v-show
• 设置条件

• 向列表中添加项：

• 找到输入框，v-model绑定data中的数据
• 在data中提供一个以供添加的数据
• 找到添加按钮，绑定时间
• 在methods中添加方法
• 在方法中向data中的list添加数据

• 删除

• 找到删除按钮，绑定事件
• 在methods中添加删除方法
• 方法中定位利用v-for中的索引定位，向删除方法中传参

用axios删除项：主要url是删除项的url，可以传参数ID，ID拼接在url后面：/+ID

• 模糊搜索：/?name_like='+this.searchVal
  f返回符合条件的对象
  用watch解决axios搜索问题：

watch：{
   
    searchVal(newVal,oldVal){
   
        axios.get('url/?name_like='+newVal).then((res)=>{
   
        const{
   status,data}=res