Vue【二】渲染数据，计算属性computed、侦听器watch的使用，成绩案例。

最新推荐文章于 2024-04-14 15:00:58 发布
最新推荐文章于 2024-04-14 15:00:58 发布
阅读量984 收藏 6
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51602285/article/details/127857513
版权

Vue【二】渲染数据，计算属性computed、侦听器watch的使用，成绩案例。

文章目录

前言

刚学完watch、computed我们可以在下面的小项目练一下手，后面做项目也会用到下面思路以及做题方法，涉及到filter，reduce等数组方法。

动态展示
在这里插入图片描述

注：文章末尾有初始化的结构，拿来用即可。

一、操作步骤

1、渲染数据

使用v-if把数组arr里面的数组渲进页面

		tbody>
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{i+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="{red:item.score<60}">{{item.score}}</td>
            <td>{{item.date}}</td>
            <td><a href="#">删除</a></td>
          </tr>
        </tbody>
		//当数据为空的时候下面展示
        <tbody v-show="!list.length">
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>

效果图：

2、添加数据—添加按钮的实现

	  <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" v-model.number="subject"/>
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score"/>
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="addData">添加</button>
        </div>
      </div>

  methods:{
    addData(){
      this.list.push({
        id:Math.random(),
        subject:this.subject,
        score:this.score,
        //时间我们简单点写成静态数据，也可以用第三方模块moment中的moment(date).format('YYYY-MM-DD hh:mm:ss')
        date:new Date('2022/06/08 10:00:00')
      })
    }
  }

效果：
在这里插入图片描述

3、删除数据—删除按钮的实现

我们删除数据的实现是使用数组过滤器filter来删选数据。

		<tbody>
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{i+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="{red:item.score<60}">{{item.score}}</td>
            <td>{{item.date}}</td>
+           <td><a href="#" @click.prevent="delData(item.id)">删除</a></td>
          </tr>
        </tbody>

	delData(id){
      this.list=this.list.filter(item=>item.id!=id)
    }

效果：
在这里插入图片描述

4、完善—平均分、总分的完成

使用计算属性来计算总分。

 			<td colspan="5">
+             <span>总分：{{getAll}}</span>
+             <span style="margin-left:50px">平均分：{{(getAll/(list.length||1)).toFixed(2)}}</span>
            </td>

== 当list长度为0，就会显示NaN，所以当长度为0时，使总分0除以1结果为0==

computed:{
    getAll(){
      return this.list.reduce((num,item)=>num+item.score,0)
    }
  },

5、拓展—本地储存

  data () {
    return {
+     list: JSON.parse(localStorage.getItem('list')) || [],
      subject: '',
      score: ''
    }
  },

使用watch监听器来监听list的数据是否发生改变，如果改变立马存入本地。

  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      }
    }
  }

二、代码

1、源码（未写之前）

<template>
  <div class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr >
            <td>1</td>
            <td>语文</td>
            <td class="red">56</td>
            <td>Tue Jun 07 2022 10:00:00 GMT+0800 (中国标准时间)</td>
            <td><a href="#">删除</a></td>
          </tr>
          <tr >
            <td>2</td>
            <td>数学</td>
            <td>100</td>
            <td>Tue Jun 07 2022 10:00:00 GMT+0800 (中国标准时间)</td>
            <td><a href="#">删除</a></td>
          </tr>
        </tbody>

        <!-- <tbody >
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody> -->

        
        <tfoot>
          <tr>
            <td colspan="5">
              <span>总分：321</span>
              <span style="margin-left:50px">平均分：80.25</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" >添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScoreCase',
  data () {
    return {
      list: [
        {id: 15, subject: '语文', score: 89, date: new Date('2022/06/07 10:00:00')},
        {id: 27, subject: '数学', score: 100, date: new Date('2022/06/07 15:00:00')},
        {id: 32, subject: '英语', score: 56, date: new Date('2022/06/08 10:00:00')},
        {id: 41, subject: '物理', score: 76, date: new Date('2022/06/08 10:00:00')}
      ],
      subject: '',
      score: ''
    }
  }
};
</script>

<style lang="less">
.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  .table {
    flex: 4;
    table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      th {
        background: #f5f5f5;
      }
      tr:hover td {
        background: #f5f5f5;
      }
      td,
      th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
        &.red {
          color: red;
        }
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .form {
    flex: 1;
    padding: 20px;
    .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
}
</style>

2、源码（已经完成）

<template>
  <div class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in list" :key="item.id">
            <td>{{i+1}}</td>
            <td>{{item.subject}}</td>
            <td :class="{red:item.score<60}">{{item.score}}</td>
            <td>{{item.date}}</td>
            <td><a href="#" @click.prevent="delData(item.id)">删除</a></td>
          </tr>
        </tbody>

        <tbody v-show="!list.length">
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>

        
        <tfoot>
          <tr>
            <td colspan="5">
              <span>总分：{{getAll}}</span>
              <span style="margin-left:50px">平均分：{{(getAll/(list.length||1)).toFixed(2)}}</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" v-model.number="subject"/>
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score"/>
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="addData">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScoreCase',
  data () {
    return {
      list: [
        {id: 15, subject: '语文', score: 89, date: new Date('2022/06/07 10:00:00')},
        {id: 27, subject: '数学', score: 100, date: new Date('2022/06/07 15:00:00')},
        {id: 32, subject: '英语', score: 56, date: new Date('2022/06/08 10:00:00')},
        {id: 41, subject: '物理', score: 76, date: new Date('2022/06/08 10:00:00')}
      ],
      subject: '',
      score: ''
    }
  },
  methods:{
    addData(){
      this.list.push({
        id:Math.random(),
        subject:this.subject,
        score:this.score,
        //时间我们简单点写成静态数据，也可以用第三方模块moment中的moment(date).format('YYYY-MM-DD hh:mm:ss')
        date:new Date('2022/06/08 10:00:00')
      })
      this.subject=this.score=''
    },
    delData(id){
      this.list=this.list.filter(item=>item.id!=id)
    }
  },
  computed:{
    getAll(){
      return this.list.reduce((num,item)=>num+item.score,0)
    }
  },
};
</script>

<style lang="less">
.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
  .table {
    flex: 4;
    table {
      width: 100%;
      border-spacing: 0;
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      th {
        background: #f5f5f5;
      }
      tr:hover td {
        background: #f5f5f5;
      }
      td,
      th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
        &.red {
          color: red;
        }
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
  .form {
    flex: 1;
    padding: 20px;
    .form-item {
      display: flex;
      margin-bottom: 20px;
      align-items: center;
    }
    .form-item .label {
      width: 60px;
      text-align: right;
      font-size: 14px;
    }
    .form-item .input {
      flex: 1;
    }
    .form-item input,
    .form-item select {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 200px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;
    }
    .form-item input::placeholder {
      color: #666;
    }
    .form-item .cancel,
    .form-item .submit {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 4px 10px;
      margin-right: 10px;
      font-size: 12px;
      background: #ccc;
    }
    .form-item .submit {
      border-color: #069;
      background: #069;
      color: #fff;
    }
  }
}
</style>
小祥编程
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue之数据渲染
DFXVHG的博客
05-10 4799
1、插值表达式 插值表达式：一般指定变量和表达式 {{password}} {{11+10}} 插值闪烁 当数据不是预定义的时候，而是通过网络进行获取的，那么当网络延迟加载时，页面中会显示插值表达式的语法，等网络加载完毕后，数据进行渲染，这种现象称之为：插值闪烁 {{a3}},{{a2}},{{a1}} v-text&v-html vue里，数据渲染通过：v-text， v-html，与JavaScript数据渲染：innerText innerHTML。一样的功能 v-te
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
【 Vue全家桶 · Vue（五）】Vue框架中的监听机制之一 —— 计算属性computed
JZevin的博客
09-07 827
文章目录一. 通过methods引入computed的概念1.1 methods版本1.2 computed版本二. computed全面解读2.1 computed本质2.1.1 调用方式2.1.2 完整写法（setter方法）2.2 响应式依赖2.3 computed作用原理2.4 computed适用场景2.4.1 多数据监听2.4.2 深度监听 ???? PART ONE ???? 如果你已经对计算属性computed有过初步的了解，建议直接阅读 第二部分 ???? 一. 通过methods引入
用vue框架进行基本的数据渲染
liGermini526的博客
04-14 655
上次讲到了es6新语法中的拷贝，新语法可以帮助我们进行代码的简化，那么这节讲的vue框架则可以更加简洁化代码，实现我们想要的功能，本节用vue框架实现对数据的基本渲染用vue框架简单渲染了一个成绩案例，其中主要包括了对vue指令的运用以及computed属性的应用，利用指令和js的方法搭配，就能达到我们想要的效果。
【手写 Vue2.x 源码】第十一篇 - Vue 的数据渲染流程
BraveWangDev
01-08 696
本篇，主要介绍了 vue 数据渲染的核心流程，初渲染与更新渲染：1，通过`template`模板，生成`ast`语法树；2，根据`ast`语法树，生成`render`函数；3，根据`render`函数，生成`vnode`虚拟节点；4，根据`vnode`虚拟节点，创建真实节点；5，使用真实节点替换原始节点；
Vue2（二）绑定样式、条件渲染、列表渲染、监视数据原理
DogEgg_001的博客
07-12 446
(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set(target，propertyName/index， value) 或。将样式写在数组中，可叠加绑定，利用数组特性，删除样式类用shift()，添加样式类用push()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!数据改变后，虚拟dom存储新的标签和数据，与改变前的虚拟dom比较，相同的复用，不同的覆盖。
Vue之计算属性案例
qq_40844663的博客
03-21 201
要求：需要将已有的两个变量值进行拼接 <div id="root"> 姓：<input type="text" v-model="firstName"><br><br> 名：<input type="text" v-model="lastName"><br><br> 全名:<span>{{fullName}}</span> </div&gt
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算属性是Vue框架中的一种特殊的属性，它...
Vue3.x中使用JavaScript表达式 、条件判断、 计算属性和watch侦听.zip
最新发布
05-08
Vue3.x作为一款流行的前端框架，它在设计上更加注重性能和灵活性，为开发者提供了丰富的功能，包括在模板中使用JavaScript表达式、条件判断、计算属性以及watch侦听器。这些特性极大地增强了Vue应用的逻辑处理能力。...
解决vue页面渲染但dom没渲染的操作
10-15
使用计算属性`computed`来根据其他数据生成新的数据，或者使用`watch`来监听数据变化并执行相应的操作。 8. **Vue版本兼容性**： 确保使用的Vue插件或库与当前Vue版本兼容。有时候，旧版本的插件可能不适用于新...
VUE的学习的使用的案例
07-11
4. **计算属性与侦听器**：计算属性（`computed`）用于根据其他数据动态计算值，而侦听器（`watch`）则可以监听并响应数据的变化，执行相应逻辑。 5. **生命周期钩子**：Vue组件有多个生命周期钩子函数，如`...
vue2和vue3的渲染过程简述版
肥晨开发的学习之路
06-19 2742
标记优化：Vue 3引入了递增式的静态标记（Incremental Static Marking），通过分层次、增量式的标记方式，将模板标记为可静态节点、需要动态跟踪的节点以及可能产生动态内容的节点，进一步减少不必要的更新操作。同时，Vue 3还引入了递增式的静态标记，可以进一步减少不必要的更新操作，提升渲染性能。渲染虚拟DOM：Vue根据渲染函数生成虚拟DOM（Virtual DOM），虚拟DOM是一种轻量级的JavaScript对象，用于表示真实的DOM结构。然后，根据差异进行有针对性地更新。
动态渲染数据
weixin_46137478的博客
03-07 1017
子组件用props接收 父组件用：进行绑定 动态渲染数据html中用v-for循环 对象也可以循环，第二个参数是key （item，key）of 名字 mounted（）{ 是调用methods中定义的函数 ，this.get…} 动态渲染数据是要引入axios 这是根组件 这是子组件 当前城...
【vue】基础(三) 实例与选项、computed属性、watch属性、三种模板、模板渲染
GY的博客
11-25 794
key属性 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。 说明：使用 key，Vue会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 vue key vue key属性的说明 <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 样式处理 -class和style 使用方式：v-bind:class="expression" or :class
6.Vue计算属性（computed）和侦听器（watch）
相互学习 共同进步
05-16 443
Vue计算属性（computed）和侦听器（watch） 计算属性（computed） 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以不推荐在“{{ … }}”中放入太多逻辑 <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个表达式中模板不再是简单的声明式逻辑。对于任何复杂逻辑，应当使用计算属性 什么是计算机属性？ 计算机
Vue2.0学习--基础--5--条件渲染
Small_sesame的博客
07-12 157
（day6） 这一张主要讲 v-if、v-else-if、v-else 、key、v-show,以及不建议v-if与v-for同时使用。 一、v-if 在<template>上使用v-if； v-if、v-else-if、v-else； 元素的复用,以及key值管理可复用的组件。 v-if指令用于条件式的渲染一块内容，只有在后面的值返回为truthy时才会被渲染。 这里的 truthy 值和 true 是不一样的，详情看MDN的解释。 <div v-if="aweso.
前端---【Vue基础更新:计算属性；监听属性；条件渲染；列表渲染；数据代理；数据劫持】
m0_61307468的博客
06-01 346
Vue基础更新----计算属性computed.监听属性watch,条件渲染v-show,v-if，列表渲染v-for，数据劫持是什么意思，数据代理是什么意思，数据代码和数据劫持的区别.何为数据劫持 概念：捕获对象属性变化的一种手段，前端的响应式框架通常都会对数据进行劫持，这样当数据发生变化时，可以自动更新相关的视图或执行其他逻辑。 5.2Vue中的数据劫持 具体实现方式： Vue收集到数据后，会将所有层级的属性，全都改为getter、setter的形式，随后放在_data中。
完全理解vue的渲染watcher、computed和user watcher
油墨香^-^的博客
02-27 538
这篇文章将带大家全面理解vue的渲染watchercomputed和，其实computed和都是基于Watcher来实现的，我们通过一个一个功能点去敲代码，让大家全面理解其中的实现原理和核心思想。watherwatcherwatchercomputedwatcher废话不要多说，先看下面的最终例子。例子看完之后我们就直接开工了。
Vue.js的核心学习笔记 - 第八章列表数据渲染的使用与方法
Marinda_Speed的博客
02-24 848
Vue.js的核心学习笔记 - 第八章列表数据渲染的使用与方法
vue项目中的计算属性computed和监听属性watch怎么使用
04-23
计算属性computed可以根据已有的数据，动态地计算出新的数据，并将计算结果返回。在Vue的组件实例中，可以通过在computed选项中定义计算属性。比如，我们可以定义一个计算属性fullName，用于拼接firstName和lastName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe' } }, computed: { fullName() { return this.firstName + ' ' + this.lastName } } } </script> ``` 监听属性watch可以在数据变化时执行自定义的回调函数。在Vue的组件实例中，可以通过在watch选项中定义监听属性。比如，我们可以定义一个监听属性firstName，用于在firstName变化时更新fullName： ``` <template> <div> First name: <input v-model="firstName"><br> Last name: <input v-model="lastName"><br> Full name: {{ fullName }} </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe', fullName: '' } }, watch: { firstName(val) { this.fullName = val + ' ' + this.lastName } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小祥编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值