Vue系列（二）之 基础语法上篇【插值，指令，过滤器，计算属性监听属性】以及购物车实现

news2024/12/23 20:22:07

目录

一. 插值

1.1 文本

 1.2 原始HTML

1.3 属性

1.4 表达式

二. 指令

2.1 v-if/v-else-if/v-else指令

2.2  v-show指令

2.3 v-for指令

2.4 下拉框/复选框

2.5 动态参数

 三. 过滤器

3.1 局部过滤器基本应用

3.2 局部过滤器串行使用

3.3 局部过滤器传参

3.4 全局过滤器

四. 计算属性和监听属性

4.1 计算属性

4.2 监听属性

一. 插值

1.1 文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

		<div id="app">
			<p>1.文本</p>
			{{msg}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						msg:'今天的不开心就到此为止吧！'
					}
				}
			})
		</script>

效果：

 1.2 原始HTML

v-html指令会将数据中含有的标签解析后进行显示

		<div id="app">
			<p>2.原始HTML</p>
			<b v-html="msg2"></b>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						msg2:'<span style="color: red;">今天的不开心就到此为止吧！</span>'
					}
				}
			})
		</script>

效果：

 

1.3 属性

所有原生态的属性，要利用vue的变量，都要在属性前加v-bind指令

例：<b v-bind:class="xxx"></b>

可以简写为：<b :class="xxx"></b>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title>插值</title>
		<style>
			.xx{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>2.原始HTML</p>
			<b v-html="msg2"></b>
			<p>3.属性</p>
			<b :class="msg3" v-html="msg2"></b>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						msg2:'<span style="color: red;">今天的不开心就到此为止吧！</span>',
						msg3:'xx'
					}
				}
			})
		</script>
	</body>
</html>

效果：

1.4 表达式

Vue提供了完全的js表达式支持

		<div id="app">
			<p>4.表达式</p>
			和为：{{num+1}}<br>
			{{warn.substring(0,4)}}<br>
			<input v-model="ok">
			{{ok==1?'我很开心':'我不开心'}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						num:6,
						warn:'不许不开心！',
						ok:1
					}
				}
			})
		</script>

效果：

二. 指令

指的是带有"v-"前缀的特殊属性

2.1 v-if/v-else-if/v-else指令

根据其后表达式的boolean值进行判断是否渲染该元素，他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if，

v-else上一个兄弟元素必须是v-if或者是v-else-if

		<div id="app">
			<p>1.v-if/v-else-if/v-else</p>
			<input v-model="score">
			<b v-if="score < 60">不及格</b>
			<b v-else-if="score >=60 && score < 70">及格</b>
			<b v-else-if="score >=70 && score < 80">中等</b>
			<b v-else-if="score >=80 && score < 90">良好</b>
			<b v-else="">优秀 </b>
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						score:69
					}
				}
			})
		</script>

效果：

2.2  v-show指令

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

		<div id="app">
			<p>2.v-show</p>
			<b v-if="isShow">展示</b>
			<b v-show="isShow">展示</b>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						isShow:false
					}
				}
			})
		</script>

v-if这个标签在浏览器都不存在，v-show有html代码，只是被css样式隐藏了。

2.3 v-for指令

类似JS的遍历

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

		<div id="app">
			<p>3.v-for</p>
			<i v-for="a in arr">{{a}}&nbsp;&nbsp;</i><br>
			<i v-for="u in users">{{u.name}}&nbsp;&nbsp;</i><br>
			<i v-for="i,u in users">{{i}}&nbsp;&nbsp;</i>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						arr:[1,2,3,4],
						users:[{
							name:'程少商',id:1
						},{
							name:'凌不疑',id:2
						},{
							name:'许红豆',id:3
						},{
							name:'谢之遥',id:4
						}]
					}
				}
			})
		</script>

效果：

2.4 下拉框/复选框

		<div id="app">
			<p>4.下拉框/复选框</p>
			<select>
				<option v-for="h in hobbies" :value="h.id">{{h.name}}</option>
			</select>
			<div v-for="h in hobbies">
				<input type="checkbox" name="hobbies" :value="h.id">{{h.name}}
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						hobbies:[{
							name:'跑步',id:1
						},{
							name:'打游戏',id:2
						},{
							name:'唱歌',id:3
						},{
							name:'绘画',id:4
						}]
					}
				}
			})
		</script>

效果：

2.5 动态参数

从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

  <a v-bind:[attrname]="url"> ... </a>

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

  <a v-on:[evname]="doSomething"> ... </a>

  注：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

		<div id="app">
			<p>5.动态参数</p>
			<input v-model="evname">
			<button v-on:[evname]="test">点我点我</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						evname:'click'
					}
				},
				methods:{
					test(){
						// 单击事件  双击事件
						alert('点我干嘛！！！')
					}
				}
			})
		</script>

效果：

 三. 过滤器

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联    

         {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

         {{ message | filterA('arg1', arg2) }}

3.1 局部过滤器基本应用

		<div id="app">
			<p>1.局部过滤器基本应用</p>
			{{msg}}<br>
			{{msg | filterA}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				filters:{
					'filterA':function(v){
						return v.substr(0,6);
					}
				},
				data(){
					return {
						msg:'今天的不开心就到此为止吧！'
					}
				}
			})
		</script>

效果：

 

3.2 局部过滤器串行使用

		<div id="app">
			<p>2.局部过滤器串行使用</p>
			{{msg}}<br>
			{{msg | filterA | filterB}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				filters:{
					'filterA':function(v){
						return v.substr(0,6);
					},
					'filterB':function(v){
						return v.substr(2,4);
					}
				},
				data(){
					return {
						msg:'今天的不开心就到此为止吧！'
					}
				}
			})
		</script>

 效果：

3.3 局部过滤器传参

		<div id="app">
			<p>3.局部过滤器传参</p>
			{{msg}}<br>
			{{msg | filterC(3,9)}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				filters:{
					'filterC':function(v,begin,end){
						return v.substr(begin,end);
					}
				},
				data(){
					return {
						msg:'今天的不开心就到此为止吧！'
					}
				}
			})
		</script>

效果：

3.4 全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="date.js"></script>
		<title>过滤器</title>
	</head>
	<body>
		<div id="app">
			<p>4.全局过滤器</p>
			{{time}}<br>
			{{time | all}}
		</div>
		<script type="text/javascript">
			Vue.filter('all', function(value) {
				return fmtDate(value);
			});
			new Vue({
				el:"#app",
				data(){
					return {
						msg:'今天的不开心就到此为止吧！',
						time:new Date()
					}
				}
			})
		</script>
	</body>
</html>

date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

 效果：

四. 计算属性和监听属性

4.1 计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

   computed:{}

		<div id="app">
			<p>1.计算属性</p>
			单价:<input v-model="price">
			数量:<input v-model="num">
			小计:{{subtotal}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						price:79,
						num:1
					}
				},
				computed:{
					subtotal:function(){
						return this.price * this.num;
					}
				}
			})
		</script>

效果:

4.2 监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

   watch:{}

		<div id="app">
			<p>2.监听属性</p>
			千米:<input v-model="km" />
			米:<input v-model="m" />
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {
						m:1000,
						km:1
					}
				},
				watch:{
					km:function(v){
						// v指的是被监听的属性km
						this.m = parseFloat(v) * 1000;
					},
					m:function(v){
						// v指的是被监听的属性m
						this.km = parseFloat(v) / 1000;
					}
				}
			})
		</script>

效果：

 

计算属性是一个变量影响另一个变量，单向影响。监听属性是双向影响。

 五. 利用Vue实现一个简单的购物车

<!DOCTYPE html>
<html>
<head>
  <title>购物车</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>购物车</h1>
    <table border="0">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartItems" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price.toFixed(2) }}</td>
          <td>
            <button @click="decreaseQuantity(index)">-</button>
            {{ item.quantity }}
            <button @click="increaseQuantity(index)">+</button>
          </td>
          <td>{{ calculateSubtotal(item).toFixed(2) }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" style="float: right;">总价：</td>
          <td>{{ calculateTotalPrice().toFixed(2) }}</td>
        </tr>
      </tfoot>
    </table>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        cartItems: [
          { name: '爱心棉花糖', price: 3.9, quantity: 1 },
          { name: '精致小风扇', price: 29.9, quantity: 1 },
          { name: '小猪佩奇鼠标', price: 30, quantity: 1 }
        ]
      },
      methods: {
        increaseQuantity(index) {
          this.cartItems[index].quantity++;
        },
        decreaseQuantity(index) {
          if (this.cartItems[index].quantity > 1) {
            this.cartItems[index].quantity--;
          }
        },
        calculateSubtotal(item) {
          return item.price * item.quantity;
        },
        calculateTotalPrice() {
          let totalPrice = 0;
          for (let i = 0; i < this.cartItems.length; i++) {
            totalPrice += this.calculateSubtotal(this.cartItems[i]);
          }
          return totalPrice;
        }
      }
    });
  </script>
</body>
</html>

效果： 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1044503.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

华为云云耀云服务器L实例评测 ｜ 实例使用教学之简单使用：通过部署宝塔面板可视化管理华为云云耀云服务器

华为云云耀云服务器L实例评测 ｜ 实例使用教学之简单使用：通过部署宝塔面板可视化管理华为云云耀云服务器

华为云云耀云服务器L实例评测 &#xff5c; 实例使用教学之简单使用&#xff1a;通过部署宝塔面板可视化管理华为云云耀云服务器 介绍华为云云耀云服务器 华为云云耀云服务器 &#xff08;目前已经全新升级为 华为云云耀云服务器L实例&#xff09; 华为云云耀云服务器是什么华为…
阅读更多...
遥遥领先喊得再大声也没用了，美企领先优势越发明显，无奈的现实

遥遥领先喊得再大声也没用了，美企领先优势越发明显，无奈的现实

遥遥领先已成为这一段时间特殊的口号&#xff0c;然而口号终究代替不了现实&#xff0c;在广受关注的两个行业--汽车和手机市场&#xff0c;都显示出真正遥遥领先的其实是美企&#xff0c;后来者已越发难以追赶了。 在手机行业&#xff0c;苹果饱受诟病&#xff0c;又是镜头进灰…
阅读更多...
Nginx之memcached_module模块解读

Nginx之memcached_module模块解读

目录 基本介绍 安装添加模块 模块配置指令 基本介绍 nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出&#xff0c;后续的请求不再经过应用程序处理&#xff0c;如php-fpm、django&#xff0c;大大的提升动态页面的速度。nginx只负责从memcach…
阅读更多...
STM32 UART通信协议 基础知识

STM32 UART通信协议 基础知识

通用异步收发器&#xff08;Universal Asynchronous Receiver/Transmitter)&#xff0c;通常称作UART&#xff0c;是一种串行、异步、全双工的通信协议。 在通信领域中&#xff0c;有两种数据通信方式&#xff1a;并行通信和串行通信。串口的数据传输是以串行方式进行的。串口在…
阅读更多...
libtorch之tensor的使用

libtorch之tensor的使用

1. tensor的创建 tensor的创建有三种常用的形式&#xff0c;如下所示 ones创建一个指定维度&#xff0c;数据全为1的tensor. 例子中的维度是2维&#xff0c;5行3列。 torch::Tensor t torch::ones({5,3}); zeros创建一个指定维度&#xff0c;数据全为0的tensor&#xff0c;例子…
阅读更多...
最新AI写作系统ChatGPT源码/支持GPT4.0+GPT联网提问/支持ai绘画Midjourney+Prompt+MJ以图生图+思维导图生成

最新AI写作系统ChatGPT源码/支持GPT4.0+GPT联网提问/支持ai绘画Midjourney+Prompt+MJ以图生图+思维导图生成

一、AI创作系统 SparkAi系统是基于很火的GPT提问进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT系统&#xff1f;小编这里写一个详细图文教程吧&#x…
阅读更多...
极光笔记 | 聊一聊推送系统中事件驱动架构的应用

极光笔记 | 聊一聊推送系统中事件驱动架构的应用

微服务间通信方式主要有2种&#xff1a;RPC和消息传递。 通常来说在请求/响应的场景下使用RPC更加合适&#xff0c;具体实现通常是REST API或者基于长链接的协议&#xff08;例如gRPC/Thrift/Zero ICE等&#xff09;。两个服务有比较强的依赖关系&#xff0c; 调用者依赖被调用…
阅读更多...
亚马逊无线鼠标FCC认证办理 FCC ID

亚马逊无线鼠标FCC认证办理 FCC ID

无线鼠标是指无线缆直接连接到主机的鼠标&#xff0c;采用无线技术与计算机通信&#xff0c;从而省却电线的束缚。通常采用无线通信方式&#xff0c;包括蓝牙、Wi-Fi (IEEE 802.11)、Infrared (IrDA)、ZigBee (IEEE 802.15.4)等多个无线技术标准。随着人们对办公环境和操作便捷…
阅读更多...
OpenAI放出的ChatGPT 4的多模态语音和图像更新

OpenAI放出的ChatGPT 4的多模态语音和图像更新

近日OpenAI放出的ChatGPT 4的多模态语音和图像更新的模型其实叫GPT-4V(ision)。OpenAI放出了19页的GPT-4V(ision)报告来解释这个模型&#xff0c;释放了大量信息&#xff1a;GPT-4V(ision)的训练完成于2022年&#xff0c;2023年3月开始提供早期访问。GPT-4V 的训练过程与 GPT-4…
阅读更多...
SQLAlchemy关联表一对多关系的详解

SQLAlchemy关联表一对多关系的详解

目录 ORM关系之一对多 示例1 代码刨析 示例2 代码刨析 ORM关系之一对多 mysql级别的外键&#xff0c;还不够爽&#xff0c;必须拿到一个表的外键&#xff0c;然后通过这个外键再去另外一张表中查找&#xff0c;这样太麻烦了。 SQLAlchemy提供了一个relationship&#xf…
阅读更多...
软件工程第三周

软件工程第三周

可行性研究 续 表达工作量的方式 LOC估算&#xff1a;Line of Code 估算公式S(Sopt4SmSpess)/6 FP&#xff1a;功能点 1. LOC (Line of Code) 估算 定义&#xff1a;LOC是指一个软件项目中的代码行数。 2. FP (Function Points) 估算 定义&#xff1a;FP是基于软件的功能性和…
阅读更多...
H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权

H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权

概述 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。 详细 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。H5DS 官方 Git (GitHub - h5…
阅读更多...
XC3110 高性能、低成本离线式PWM功率开关 可用于小家电电源 辅助电源 最大200MA的电流

XC3110 高性能、低成本离线式PWM功率开关 可用于小家电电源 辅助电源 最大200MA的电流

XC3110是一款非隔离型、高集成度且低成本的PWM功率开关&#xff0c;适用于降压型和升降压型电路。 XC3110采用高压单晶圆工艺&#xff0c;在同一片晶圆上集成有500V 高压 MOSFET 和采用开关式峰值电流模式控制的控制器。在全电压输入的范围内可以保证高精度的5V 默认输出。在芯…
阅读更多...
C#设置自动关机

C#设置自动关机

功能&#xff1a;自动设置电脑关机时间&#xff0c;可取消 创建一个shutdown函数&#xff0c;bool isCancle&#xff0c;传入值为ture就取消关机&#xff0c;interval间隔时间&#xff0c;unit不带符号的整型 private static void ShutdownPC(bool isCancel, uint interval){P…
阅读更多...
A*搜索算法

A*搜索算法

前言 这个我也不知道算不算是A*搜索算法&#xff0c;可能只是A搜索算法。 首先看相关的定义&#xff1a; 启发式搜索在搜索过程中根据启发信息评估各个节点的重要性&#xff0c;优先搜索重要的节点。 估价函数的任务就是估计待搜索节点“有希望”的程度。 估价函数f(n)定义…
阅读更多...
vue 实现数字验证码功能

vue 实现数字验证码功能

需求&#xff1a;写了一个 手机发送验证码后 输入固定验证码的功能 封装成一个组件,如下: <template><div class"conts"><div class"box"><div class"code_list"><div :class"[ code_item, hideIndex 0 ? co…
阅读更多...
Ubuntu Qt 5.15.2 支持 aarch64

Ubuntu Qt 5.15.2 支持 aarch64

概述 AArch64是ARMv8 架构的一种执行状态。 为了更广泛地向企业领域推进&#xff0c;需要引入64 位构架。 同时也需要在ARMv8 架构中引入新的AArch64 执行状态。 AArch64 不是一个单纯的32 位ARM 构架扩展&#xff0c;而是ARMv8 内全新的构架&#xff0c;完全使用全新的A64 指令…
阅读更多...
软件设计模式——外观模式

软件设计模式——外观模式

摘要 本文主要分析设计模式 - 结构型 - 外观(Facade)&#xff0c;它提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口&#xff0c;从而让子系统更容易使用。 一、外观模式的意图 提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口&#xff0c;从而让…
阅读更多...
2023蓝帽杯半决赛取证复现

2023蓝帽杯半决赛取证复现

1.检材数据开始提取是今年什么时候&#xff1f;&#xff08;答案格式&#xff1a;04-12 13:26&#xff09; 09-11 17:21 这题做错了 其实当时盘古石手机取证里面就有的&#xff0c;想多了去看了日志文件 是真的有点歧义&#xff0c;20分就开始提取任务了 2.嫌疑人手机SD卡存…
阅读更多...
TLS/SSL(七) 非对称密码应用 之DH密钥交换协议

TLS/SSL(七) 非对称密码应用 之DH密钥交换协议

一 DH密钥交换协议 DH密钥交换协议用来沟通协商出后面AES算法的密钥,是广泛使用、安全的密钥交换协议 ① RSA密钥交换 备注&#xff1a; RSA算法没有前向保密性&#xff0c;所以TLS1.3及以后的协议禁止RSA作为密钥协商算法 如何理解前向保密性 故事&#xff1a; 斯诺登事…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023