Vue 表单、事件处理、$set 生命周期

最新推荐文章于 2024-03-19 16:26:40 发布
最新推荐文章于 2024-03-19 16:26:40 发布
阅读量923 收藏 1
点赞数
分类专栏： Vue 文章标签： 中间件 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ILove_bugs/article/details/121501983
版权

1. 指令综合案例-信息表

<!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>
</head>
<style>
    /* 90分以上 */
    .active1 {
        background-color: blue;
        color: white;
    }
​
    /* 60分以下 */
    .active2 {
        background-color: red;
        color: white;
    }
</style>
​
<body>
    <div id="app">
        <!-- 1. 页面结构 -->
        <!-- 添加表单 -->
        <input placeholder="用户名" v-model="stuInfo.name">
        <hr>
        <input placeholder="电话" v-model="stuInfo.tel">
        <hr>
        <input placeholder="成绩" v-model="stuInfo.score">
        <hr>
        <button @click="addStudent">添加用户信息</button>
        <hr>
        <!-- 表单遍历用户的信息列表 -->
        <table width="600" border="1" style="border-collapse: collapse;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>成绩</th>
                    <th>等级</th>
                    <th>操作</th>
                </tr>
            </thead>
​
            <tbody>
                <!-- 3. 遍历和渲染数据 -->
                <tr 
                    v-for="(item,index) in students" 
                    :key="item.id" 
                    :class="{ active1:item.score>=90,active2:item.score < 60 }"
                >
                    <td>{
 {item.id}}</td>
                    <td>{
 {item.name}}</td>
                    <td>{
 {item.tel}}</td>
                    <td>{
 {item.score}}</td>
                    <td>
                        <span>优</span>
                        <span>良</span>
                        <span>中</span>
                        <span>差</span>
                    </td>
                    <td>
                        <button @click="deleteStu( index )">删除</button>
                    </td>
                </tr>
                <!-- <tr class="active1">
                    <td>111</td>
                    <td></td>
                    <td></td>
                    <td>95</td>
                    <td></td>
                </tr>
                <tr>
                    <td>111</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="active2">
                    <td>111</td>
                    <td></td>
                    <td></td>
                    <td>60</td>
                    <td></td>
                </tr> -->
​
                <tr v-if="students.length == 0">
                    <td colspan="5">暂无数据</td>
                </tr>
            </tbody>
​
        </table>
        <button @click="deleteAll">全部删除</button>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            //2. 初始化数据
            students: [
                { id: 1, tel: '15811', name: '诸葛亮', sex: '男', score: 98 },
                { id: 2, tel: '15822', name: '周瑜', sex: '男', score: 88 },
                { id: 3, tel: '15833', name: '刘阿斗', sex: '男', score: 50 },
  
最低0.47元/天 解锁文章
ILove_bugs
关注
专栏目录
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
为了在表格初始化时设置数据，可以使用`mounted`生命周期钩子来填充`domains`数组。之后，使用`this.$set`方法将`domains`数组赋值给`fromData`的`domains`属性，这样`el-form`就能识别到表格中的数据。 提交表单时...
Vue基础-综合案例（基于vue2）
a_xia_o的博客
07-27 674
vue-clivue脚手架）是vue官方提供的、快速生成vue工程化项目的工具。特点：①开箱即用②基于webpack③功能丰富且易于扩展④支持创建vue2和vue3的项目在实际开发中，前端开发者可以把自己封装的.vue组件整理、打包、并发布为npm的包，从而供其他人下载和使用。这种可以直接下载并在项目中使用的现成组件，就叫做vue组件库。拦截器会在每次发起ajax请求和得到响应的时候自动被触发。应用场景：①Token身份认证②Loading效果等等。
Vue学习（二十六）——综合案例：图书管理（一）
云中、漫步的博客
10-05 1439
目录一、图书列表的展示功能1、实现静态列表效果2、基于数据实现模板效果3、处理每行的操作按钮二。添加图书1、实现表单的静态效果2、添加图书表单域数据绑定3、添加按钮事件绑定4、实现添加业务逻辑三、修改图书1、修改信息填充到表单① JS中的Array.filter()方法2、修改后重新提交表单3、重用添加和修改的方法②JS中的Array.some()方法③Js中的箭头函数 接下来我们结合之前我们所学到的知识，完成一个图书管理的案例，大致如下，完成对图书的増、删、改操作： 一、图书列表的展示功能 1、实现静态
Vue.js的综合案例
Yao_Huang_的博客
11-11 622
1、 综合案例： TodoMVC TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式 官网： http://todomvc.com/ 评价： 功能完备不冗余，多样实现引深思 2、准备工作 从 github 克隆项目模板 git clone https://github.com/tastejs/todomvc-app-template.git 进入项目目录，安装项目依赖 cd 项目目录 npm install ...
（22）Vue.js 综合案例：TodoMVC
Java田根旺
02-04 1196
一、TodoMVC介绍 TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。 官网地址：http://todomvc.com/ TodoMVC一句话评价：功能完备不冗余，多样实现引深思。 其实就说的是我们可以再内容中去使用到Vue.js的语法，但不会为了去练习语法而练习语法，再不同的场景体会语法带来的不同效果，对语法进行更深刻的理解。 二、TodoMVC准备工作 安装git版本控制工具：https://git-scm.com/ Git是一个开源的分布式版本控制系统，用于敏捷高效地.
vue学习日记10:综合案例-购物车
最新发布
yinfanfff的博客
03-19 484
（2）展示 减到1就不能再减，点击删除直接删除 这里写三元表达式也可以 三元表达式是一种在许多编程语言中常见的条件表达式，它由三个操作数组成：一个条件表达式、一个真值表达式和一个假值表达式。其一般形式为： 如果写成if...else 三元写法 被勾选的被计算 5.持久化本地如果用户对其操作之后 没有持久化刷新后就会成问题（1）代码 如果没有 || （defaultArr）清除缓存后就会null崩溃 ，加上之后就会默认回到初试页面了（2）展示
Vue+ElementUI实现表单动态渲染、可视化配置的方法
11-29
使用`mounted`生命周期钩子，在组件挂载完成后，遍历`formItemList`，为每个字段设置默认值，并通过`$emit('input')`通知父组件更新数据。 ```javascript export default { props: { formConfig: { type: ...
浅谈vue中resetFields()使用注意事项
11-19
在Vue.js应用中，特别是在使用UI库如vue-element-ui时，`resetFields()`是一个非常实用的方法，用于重置表单的字段。然而，这个方法在某些...在实际开发中，良好的编程习惯和对框架生命周期的理解是解决问题的关键。
vue踩坑记录之数组定义和赋值问题
10-17
在`created`生命周期钩子中，我们调用了`getContractInfo`方法，该方法从服务端获取合同信息，并尝试将有效日期转换后赋值给`effective_date`。然而，这种赋值方式在页面渲染时并未成功。 问题在于，当尝试用下标...
vue.js2.chm中文手册下载
11-28
Vue.js 2.0 API包含了大量的实例方法、全局API、指令、过滤器等，如`$mount`、`$destroy`用于实例生命周期管理，`Vue.set`用于添加响应式属性，`Vue.extend`用于创建组件构造函数。 总的来说，Vue.js 2.0中文手册...
Vue综合案例（添加、修改、删除）
06-30
Vue综合案例（添加、修改、删除）
Vue&综合案例
xglfire的博客
07-01 2836
Vue&综合案例 Vue 高级使用 自定义组件 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。 本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。 定义格式 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
Vue教程(综合小案例)
weixin_49111211的博客
09-21 750
1.VueJS 概述与快速入门 1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模
vue综合案例
weixin_43981968的博客
11-02 110
Vue综合案例
Vue_综合案例
qq_44509920的博客
09-24 1206
文章目录1.1 案例需求1.2 数据库设计与表结构1.3 服务器端1.3.1 创建SpringBoot项目1.3.2 导入jar包1.3.3 配置文件（application.properties）1.3.4 创建springboot引导类1.3.5 创建实体1.3.6 创建Dao1.3.7 创建Service1.3.8 创建Controller1.4 浏览器端1.4.1 user.html1.4.2 查询所有1.4.2.1 UserService1.4.2.2 UserController1.4.2.3
前端知识点自我总结 二
PinPinAnan的博客
03-18 324
一、vue实现组件的缓存 我们为什么需要组件缓存，因为在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来。 组件化的概念可以很好的帮助开发者实现组件之间的切换，但是当我们的组件在频繁的切换过程中，组件的实例都是一直重新创建销毁的，当我们需要保留组件的状态的时候。 就可以用 <keep-alive><keep-alive> 包裹组件，这样就可以缓存不在活动状态的组件实例，用于保留组件状态或避免重新渲染 二、keep-alive有关的生命周期有哪些
【vue小案例】
qq_47168657的博客
11-06 475
vue的双for循环案例，表格案例，选项卡切换发布评论案例
vue学习日记08：综合案例成绩案例
yinfanfff的博客
03-06 1029
index.css 案例静态模版代码 2.开始练习 需求说明： 1.渲染功能 2.删除功能 3.添加功能 4.统计总分，求平均分模版如图 成绩和暂无数据应该二显示一个使用v-if和v-else 可以把元素销毁 不用v-show 如果输入的不正确弹出提示 添加后情况输入框的内容 当没有数据的时候显示会不符合，0除以0还保留两位小数不合理所有加上添加判断
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值