【Vue.JS】Vue.js 基本数据绑定 过滤器 计算属性 方法 购物车自动汇总总价的Demo

本文主要是介绍【Vue.JS】Vue.js 基本数据绑定 过滤器 计算属性 方法 购物车自动汇总总价的Demo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Demo最终效果图

img1

Vue 基本使用

  • 基本的数据绑定
    • {{}} 插值表达式绑定数据。这种情况返回输出的是纯字符串。
  • 基本指令运用
    • v-bind 绑定某一属性。如 v-bind:src=“http://…”
    • v-on
    • v-if
    • v-html 如果想输出 HTML 文档
    • v-pre 跳过当前元素和它子元素的编译过程。
    • : 是 v-bind 的语法糖。v-bind:src="" 等价于 :src=""
    • @ 是 v-on 的语法糖。v-on:click=“btnfunction()” 等价于 @click=“btnFunction()”
  • 插值过滤器
    • 通常用户格式化文本:{{date | filtersA}}
    • 过滤器可以连接多个:{{date | filtersA | filterB}}
    • 过滤器可以传参:{{date | formatDate(arg1, arg2)}}。但是接收参数时注意,第一个参数为数据本身,后面的参数依次为手动传入的参数。
  • 计算属性 & 方法
    • 相同点
      1. 二者的目的都是处理数据
      2. 二者内部的代码写法基本一样
    • 不同点
      1. 调用方式不同
        + 调用方法时需要加小括号(),括号内可以传参,如果不加,也不会报错,但返回的是方法本身,而并非值。
      2. 队列缓存机制
        + 计算属性有自己的缓存机制,当计算属性依赖的数据发生变化时,才会重新取值,所以只要 text 不变,计算属性的值就不更新
        + 方法只要重新渲染DOM,就会被调用执行。
        + ★ 当处理大数据量时建议使用计算属性,因为缓存机制可以节省很多不必要的调用,除非业务需求不需要缓存。
      3. get & set
        + 方法没有 get & set 方法
        + 计算属性包含 get 和 set 方法。默认的用法只是利用 get 来读取。如果需要时,可以手动设置 set 方法。

代码

  • CSS 部分(对table表格和button按钮略微调整)
<style>table {border-collapse: collapse;border-width: 1;font-size: 11px;color: #333;border-color: #666;}th,td {border-style: solid;border-width: 1px;padding: 8px;border-color: #666;text-align: center;width: 137px;height: 16px;}th {background-color: #5f5f5f;}td {background-color: #e9e9e9;}table button {width: 12px;height: 12px;border-width: 0px;border-radius: 50%;background: #1E90FF;cursor: pointer;color: white;font-size: 4px;margin: 0 auto;}table button:hover {background: #5599FF;}table button span {line-height: 12px;}
</style>
  • HTML 部分
<div id="app"><!-- 插值表达式绑定数据 --><p>{{text}}</p><!-- v-html 输出 HTML 文档 --><span v-html="link"></span><!-- 跳过当前元素和它子元素的编译过程 --><hr><!-- v-if 绑定,其绑定的是一个 bool 类型 --><p v-if='isShow'>Show Message ?</p><!-- click 事件的两种绑定方式 --><button v-on:click="btn_click">Click here</button><button @click="isShow = !isShow">Or Click here</button><hr><p v-pre>{{text}}}</p><!-- 调用计算属性 --><p>{{reversedText2}}</p><!-- 调用方法 --><p>{{reversedText1()}}</p><hr><div style="width:770px"><table><!-- 当前时间:使用 mounted 钩子事件监听,每秒钟更新一次,使用过滤器进行格式化 --><caption>当前时间 : {{date | formatDate}}</caption><thead><tr><td>No</td><td>goodsName</td><td>price</td><td>count</td><td>totalPrice</td></tr></thead><!-- 使用 v-for 绑定数组对象,循环列表 --><tbody v-for="(item, index) in demoArray"><tr><td>{{index}}</td><td>{{item.goodsName}}</td><td>{{item.price}}</td><td><!-- 绑定 click 事件,点击按钮时触发,改变监控的值,其它监控的值随之改变 --><!-- 使用 disabled 绑定,当 count 数量小于 0 时让其不可点击 --><button @click="reduce(index)" :disabled="item.count <= 0"><span>-</span></button>{{item.count}}<button @click="add(index)"><span>+</span></button></td><td>{{item.price * item.count}}</td></tr></tbody></table><!-- 使用计算属性绑定总和 --><p style="float:right">总计:{{totalPrice}}</p></div>
</div>
  • JS 部分
<script>/*定义一个方法,用来格式化日期输出,小于10时前面加0。如 01, 02 */var pDate = function (value) {return value < 10 ? '0' + value : value;}/*初始化 Vue 实例*/var app = new Vue({el: '#app',data: {text: '3.141.592.653.589.793.626.4',link: '<a href="./index.html">返回首页</a>',isShow: true,date: new Date(),//来个数组演示一下计算属性demoArray: [{goodsName: 'computer',price: 8000,count: 7}, {goodsName: 'LCD',price: 2310,count: 12}, {goodsName: 'Phone',price: 4300,count: 6}]},/*方法*/methods: {/*这里面函数的 this 是指向 Vue 实例本身的*/btn_click: function () {/*这里会发现一个奇怪的问题。 *//*isShow 的值改变在 alert 的前面,但实际页面中确是先弹窗后隐藏 DOM 节点*//*这是因为 vue 监测数据变化时的队列缓存。具体可以参照 nextTick */this.isShow = !this.isShow;alert('onclick');/*这里面的方法也可以相互调用,因为都是 vue 实例下的方法,所以使用 this 来调用*/this.showMessageBox();},//弹窗showMessageBox: function () {alert('messageBox');},//反转输出文本reversedText1: function () {//为了区分计算属性。这里使用斜线 / 来 joinreturn this.text.split('.').reverse().join('/');},/*商品数量 - 1*/reduce: function (index) {this.demoArray[index].count = this.demoArray[index].count - 1;},/*商品数量 + 1*/add: function (index) {this.demoArray[index].count = this.demoArray[index].count + 1;}},/*计算属性*/computed: {reversedText2: function () {//为了区分方法。这里使用逗号 , 来 joinreturn this.text.split('.').reverse().join(',');},/*默认的写法是利用 get 读取数据。如果需要指定写入数据时的操作,需要指定 set 方法*/// totalPrice: function () {//     var total = 0;//     this.demoArray.forEach(item => {//         total += item.price * item.count;//     });//     //console.log(total);//     return total;// },totalPrice: {//读取数据时触发get: function () {var total = 0;this.demoArray.forEach(item => {total += item.price * item.count;});return total;},//写入数据时触发set: function () {}}},/*过滤器*/filters: {formatDate: function (value) {var date = new Date(value);var year = date.getFullYear();var month = pDate(date.getMonth() + 1);var day = pDate(date.getDate());var hour = pDate(date.getHours());var miniutes = pDate(date.getMinutes());var seconds = pDate(date.getSeconds());return year + '-' + month + '-' + day + ' ' + hour + ':' + miniutes + ':' + seconds;}},/*常见钩子函数*/// 实例初始化之前beforeCreate: function () {console.log("实例初始化之前");},// 实例创建完成created: function () {console.log("实例创建完成");},// 实例挂载之前beforeMount: function () {console.log("实例挂载之前");},// el 被创建的 vm.$el 替换并挂载到实例上之后mounted: function () {console.log("实例挂载之后");/*开启计时器,每秒修改一次 date 数据*/var _this = this; //指向 Vue 实例this.timer = setInterval(function () {_this.date = new Date(); //每隔1秒,修改一次 date 的数据}, 1000)},// 数据更新,DOM 重新渲染之前beforeUpdate: function () {console.log("数据更新 DOM 重新渲染之前");},// 数据更新,DOM 重新渲染之后updated: function () {console.log("数据更新 DOM 重新渲染之后");},// 实例销毁之前beforeDestroy: function () {console.log("实例销毁之前");/*清空定时器*/if (this.timer) {clearInterval(this.timer);}},// 实例销毁之后destroyed: function () {console.log("实例销毁之后");},});
</script>

这篇关于【Vue.JS】Vue.js 基本数据绑定 过滤器 计算属性 方法 购物车自动汇总总价的Demo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/411133

相关文章

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中,有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP