Vue的进阶使用--模板语法应用

目录

前言

一. Vue的基础语法

1.插值

1.1文本插值

1.2HTML插值

1.3属性插值

1.4Vue演示三元条件运算

2 指令

2.1if&&else指令（v-if/v-else-if/v-else）

2.2 v-for 指令

2.3 v-on指令(动态参数)

2.4知识点补充之v-if与v-show的区别

 3.过滤器

3.1局部过滤器

3.2 全局过滤器

4.计算属性与监听属性

4.1计算属性

4.2 监听属性

4.3区别总结：

 二.购物车案例

前言

Vue.js 的模板语法是一种声明式的、直观的方式来构建用户界面。它允许开发者将 DOM 结构与 Vue 实例的数据和行为进行绑定，从而实现数据驱动的视图

一. Vue的基础语法

1.插值

1.1文本插值

文本插值就是利用最基础的插值表达式

<div id="app">{{msg}}
</div>

然后将Vue实例中的数据属性的值动态显示在HTML元素中

new Vue({el:"#app",data(){return {msg:'hello Vue',}}})

1.2HTML插值

如果我们想将HTML代码插入到模板中而不是纯文本，可以使用 v-html 指令

<div id="app"><p v-html="msg_html"></p>
</div>

 然后在data返回的值中定义一个msg_html,可以将html代码带入，并展示效果

new Vue({el:"#app",data(){return {msg_html:'<span style="color:pink">Hello YU</span>'}}
})

效果演示 

 

1.3属性插值

我们可以使用插值表达式绑定元素的属性，例如class、id、src等等，这里演示插入class值，为了演示效果，我们将等下要插入的class属性值添加样式

<style type="text/css">.cl{color:pink}
</style>

然后在Vue实例返回的data值中定义一个msg_class

new Vue({el:"#app",data(){return {msg_class:"cl"}}})

最后在HTML代码中对其进行属性插值

<div id="app">{{msg}}<p v-html="msg_html"></p><p :class="msg_class">Hi YU</p></div>

演示效果

1.4Vue演示三元条件运算

首先编写vue实例 

new Vue({el:"#app",data(){return {result:true}}})

在表达式中利用三元条件运算得出结果

<p>{{result? '很帅':'一般'}}</p>

因为我们的在属性定义的是true，所以结果为'很帅' 

由此可得知，表达式中支持三元条件运算

2 指令

2.1if&&else指令（v-if/v-else-if/v-else）

我们可以利用其指令制作一个分数评级器，当我们在输入分数时判定相应的级别

首先在HTML代码中利用v-model双向绑定输入框中的数据，再利用if-else进行判断展示不同内容

<div id="app"><p>v-if/v-else-if/v-else</p><input v-model="score"/><br /><b v-if="score < 60">不及格</b><b v-else-if="score > 60 && score<90">良好</b><b v-else-if="score > 90 && score <=100">优秀</b><b v-else="">分数不准确</b></div>

进行编写Vue实例

new Vue({el:"#app",data(){return {score:69,}}})

我们可以自由在输入框输入分数进行评级

2.2 v-for 指令

我们可以根据数据源的内容多次渲染DOM元素，以便动态显示列表、表格、或其他重复的内容

首先在Vue实例中定义数据源，这里定义一个JSON数组

new Vue({el:"#app",data(){return {user:[{name:'YU',id:1},{name:'sz',id:2},{name:'lx',id:3},]}}})

然后在HTML代码中利用v-for指令拿到数据源中的属性值

<div id="app"><p>v-for指令</p><i v-for="i,u in user">{{i.name}}&nbsp;</i></div>

演示效果

v-for指令可以作用在很多元素中，例如下拉框、多选框、单选框等等，当数据需要循环获取到并展现在页面上时可以使用Vue中的v-for指令，进行数据绑定 

2.3 v-on指令(动态参数)

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

(1)首先在vue实例中默认定义一个参数，然后写一个方法弹窗演示效果

new Vue({el:"#app",data(){return {evname:'click'}},methods:{test(){alert("Hi Vue")}}})

(2) 然后在HTML代码中，先将输入框中数据对data返回值进行绑定，然后通过v-on进行动态传参，当我们在输入框中输入不同的操作时（传递不同的参数），演示的效果也会不同

<div id="app"><input v-model="evname"/><button v-on:[evname]="test">点我</button></div>

 (3)演示效果

操作详解：

当我们输入click时，需要单击按钮弹出内容

输入dblclick时，需要双击按钮弹出内容

输入不同参数，进行的操作也不同

2.4知识点补充之v-if与v-show的区别

v-if 和 v-show 是Vue.js中两种常用的指令，用于根据条件控制元素的显示和隐藏。它们之间有几个重要的区别：

  1. DOM 渲染方式：

    • v-if：当条件为真时，DOM元素会被渲染到页面上；当条件为假时，DOM元素会从DOM树中移除。
    • v-show：无论条件是真还是假，DOM元素始终会被渲染到页面上，只是通过CSS的display属性控制其显示或隐藏。

  2. 初始渲染性能：

    • v-if：在初始渲染时，如果条件为假，该元素不会被渲染到DOM中，因此初始渲染性能比v-show更好。
    • v-show：无论条件真假，元素都会被渲染，只是通过CSS的display属性控制其显示或隐藏，初始渲染性能稍逊于v-if。

  3. 切换开销：

    • v-if：切换时会有DOM的创建和销毁，可能会有较大的性能开销，尤其在频繁切换时。
    • v-show：切换时只需要切换display属性，性能开销较小。

  4. 适用场景：

    • v-if：适用于在条件不经常改变时，或者条件依赖于异步操作结果的情况，可以更好地利用DOM的性能优势。
    • v-show：适用于需要频繁切换显示/隐藏的情况，例如对话框、菜单等，可以减少DOM的重复渲染。

 3.过滤器

3.1局部过滤器

创建Vue实例

new Vue({el:"#app",filters:{'fileterA':function(v){return v.substring(0,3)},'fileterC':function(v,begin,end){return v.substring(begin,end)},},data(){return {msg:"今天天气真好",}},methods:{}})

（1）局部过滤器基本使用

<div id="app"><p>局部过滤器</p>{{msg}}<p>局部过滤器基本使用</p>{{msg | fileterA}}</div>

（2）局部过滤器传参使用

<div id="app"><p>局部过滤器</p><p>局部过滤器传参使用</p>{{msg | fileterC(1,3)}}</div>

 演示结果

3.2 全局过滤器

我们在创建vue实例之前先引入js文件,后面调用格式化时间

（1）创建实例

new Vue({el:"#app",data(){return {time:new Date()}},})

（2）创建全局过滤器

Vue.filter('fmtDateFilter', function (value) {return  fmtDate(value);});

（3）HTML代码演示

<div id="app"><p>局部过滤器</p>{{msg}}<p>局部过滤器基本使用</p>{{msg | fileterA}}<p>局部过滤器传参使用</p>{{msg | fileterC(1,3)}}<p>全局过滤器</p>{{time}}<br />{{time | fmtDateFilter}}</div>

 （4）运行结果

通过运行结果我们可以发现，全局过滤器对时间进行了格式化输出页面 

4.计算属性与监听属性

4.1计算属性

计算属性用于根据依赖的数据属性计算派生的属性，这些属性可以被视为响应式的，当依赖数据变化时，计算属性会自动重新计算

（1）创建Vue实例

new Vue({el:"#result",data(){return{price:20,num:1};},computed: {subtotal:function() {return this.price* this.num }},})

（2）HTML演示

<div id="result"><p>计算属性</p>单价：<input v-model="price"/>数量：<input v-model="num"/>小计：{{subtotal}}</div>

（3）演示效果

当我们的输入框中发生变化时，会自动计算最后的总值，通常被应用在购物车中 

4.2 监听属性

监听属性主要用于在特定数据发生变化时执行自定义的操作，例如异步请求或复杂的数据处理 

（1） Vue实例

new Vue({el:"#result",data(){return{m:1000,km:1};},watch:{km:function(v){//v指被监听的属性this.m = parseInt(v)*1000},m:function(v){this.km = parseInt(v)/1000}},})

（2）HTML代码

<div id="result"><p>计算属性</p>单价：<input v-model="price"/>数量：<input v-model="num"/>小计：{{subtotal}}<p>监听属性</p>米：<input v-model="m"/>千米：<input v-model="km"/></div>

（3）演示效果

当我们的其中一个值发生变化时，另外一个绑定的值也会发生变化

4.3区别总结：

  • 监听属性适用于执行自定义的操作，通常用于响应式地处理数据变化，但不返回新的值。
  • 计算属性适用于计算派生的数据，通常返回一个新的值，当依赖数据变化时自动重新计算。
  • 计算属性的结果会被缓存，只有在依赖数据变化时才会重新计算，而监听属性没有缓存，每次数据变化都会触发回调函数。

根据您的需求，您可以选择使用监听属性或计算属性来处理组件中的数据变化。通常情况下，如果您需要派生数据或计算新的属性值，计算属性是更好的选择，而如果您需要执行一些副作用或自定义操作，监听属性更合适

 二.购物车案例

当前购物车利用计算属性，可以通过改变数量和单价，小计和总计进行相应的变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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>table {width: 100%;border-collapse: collapse;}table, th, td {border: 1px solid black;}th, td {padding: 10px;text-align: left;}input[type="number"] {width: 60px;}</style>
</head>
<body><div id="app" style="text-align: center;"><h1 style="text-align: center;">购物车</h1><div><label for="item-name">商品名称:</label><input type="text" id="item-name" v-model="newItemName"><label for="item-price">单价:</label><input type="number" id="item-price" v-model.number="newItemPrice"><label for="item-quantity">数量:</label><input type="number" id="item-quantity" v-model.number="newItemQuantity"><br><br><button @click="addItem">添加到购物车</button></div><table><thead><tr><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in cart" :key="index"><td>{{ item.name }}</td><td><input type="number" v-model.number="item.price"></td><td><button @click="decreaseQuantity(index)">-</button><input type="number" v-model.number="item.quantity"><button @click="increaseQuantity(index)">+</button></td><td>{{ item.price * item.quantity }}</td><td><button @click="removeItem(index)">移除</button></td></tr></tbody></table><p style="float: right;">总计: {{ total }}</p></div><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> --><script>new Vue({el: '#app',data: {newItemName: '',newItemPrice: 0,newItemQuantity: 0,cart: []},methods: {addItem: function() {if (this.newItemName && this.newItemPrice >= 0 && this.newItemQuantity >= 0) {this.cart.push({name: this.newItemName,price: parseFloat(this.newItemPrice),quantity: parseInt(this.newItemQuantity)});this.newItemName = '';this.newItemPrice = 0;this.newItemQuantity = 0;}},removeItem: function(index) {this.cart.splice(index, 1);},increaseQuantity(index) {this.cart[index].quantity++;},decreaseQuantity(index) {if (this.cart[index].quantity > 1) {this.cart[index].quantity--;}},},computed: {total: function() {return this.cart.reduce((acc, item) => acc + item.price * item.quantity, 0);}},computed: {total: function() {return this.cart.reduce((acc, item) => acc + item.price * item.quantity, 0);}},});</script>
</body>
</html>

运行效果

通过创建Vue实例对数据进行实时更新，当我们在每次进行添加商品时，对应的单价与数量进行计算，每次发送变化时，小计与总计也会自动更新

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

 

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

马斯洛需求层次模型分析之云安全浅谈

马斯洛需求层次模型分析之云安全浅谈

基于马斯洛需求层次模型&#xff0c;我们可以将互联网云安全建设和运营分析分为五个阶段&#xff0c;每个阶段对应一些关键的安全关键词&#xff0c;以下内容是对这些阶段的浅显分析&#xff1a; 第一阶段&#xff1a;基础设施安全&#xff08;生理需求&#xff09; 在初始阶…
阅读更多...
SpringMVC自定义注解---[详细介绍]

SpringMVC自定义注解---[详细介绍]

一&#xff0c;对于SpringMVC自定义注解概念 是一种特殊的 Java 注解&#xff0c;它允许开发者在代码中添加自定义的元数据&#xff0c;并且可以在运行时使用反射机制来获取和处理这些信息。在 Spring MVC 中&#xff0c;自定义注解通常用于定义控制器、请求处理方法、参数或者…
阅读更多...
文件名批量重命名与翻译的实用指南

文件名批量重命名与翻译的实用指南

在日常办公中&#xff0c;我们经常遇到需要批量修改文件名并进行翻译的情况。手动一个一个修改文件名既费时又繁琐&#xff0c;而且还可能出现错误。今天&#xff0c;我们将介绍一种高效的方法&#xff0c;利用文件管理工具“固乔文件管家”&#xff0c;能够快速批量修改文件名…
阅读更多...
网络编程——基础知识

网络编程——基础知识

全文目录 网络发展协议OSI七层模型TCP/IP五层(或四层)模型 网络传输网络地址IP地址MAC地址 网络通信的本质 网络发展 网络没有出来之前计算机都是相互独立的&#xff1a; 网络就是将独立的计算机连接在一起&#xff0c;局域网和广域网的区别只是范围上的大小&#xff1a; 局域…
阅读更多...
计算机毕设 LSTM的预测算法 - 股票预测 天气预测 房价预测

计算机毕设 LSTM的预测算法 - 股票预测 天气预测 房价预测

文章目录 0 简介1 基于 Keras 用 LSTM 网络做时间序列预测2 长短记忆网络3 LSTM 网络结构和原理3.1 LSTM核心思想3.2 遗忘门3.3 输入门3.4 输出门 4 基于LSTM的天气预测4.1 数据集4.2 预测示例 5 基于LSTM的股票价格预测5.1 数据集5.2 实现代码 6 lstm 预测航空旅客数目数据集预…
阅读更多...
标准防雷接地网和简易地网的制作方法

标准防雷接地网和简易地网的制作方法

防雷接地网是整套防雷系统不可缺少的部分&#xff0c;一般是由埋在地下一定深度的多个金属接地极和由导体将这些接地极相互连接组成一网状结构的接地体的总称。它广泛应用在电力、建筑、计算机&#xff0c;工矿企业、通讯等众多行业之中&#xff0c;起着安全防护、屏蔽等作用。…
阅读更多...
固定资产管理系统的作用有哪些

固定资产管理系统的作用有哪些

固定资产管理系统的功效原因很多。　　它帮助企业更好地管理其固定资金&#xff0c;包括设备的采购、维护、更新和损坏。根据系统管理计划&#xff0c;企业可以更有效地节约成本&#xff0c;提高效率&#xff0c;降低风险。　　资产管理系统可以实现企业资产共享与合作应用。在…
阅读更多...
STM32 USB CDC 虚拟串口

STM32 USB CDC 虚拟串口

// 用虚拟串口(USB CDC VCP)感觉有些不稳定&#xff0c;尤其是下位机掉电后再上电&#xff0c;上位机虚拟的那个串口根本不能用&#xff0c;还有就是 // 必须等虚拟串口出来后且知道串口号上位机才可以执行打开操作// 上面是实际情况&#xff0c;但并不是STM32的USB不行&#x…
阅读更多...
今年嵌入式行情怎么样？

今年嵌入式行情怎么样？

今年嵌入式行情怎么样&#xff1f; 嵌入式技术今年可以说是IT领域中最炙手可热的之一。随着中年危机和内卷问题的出现&#xff0c;越来越多的互联网从业者将目光投向了嵌入式领域。国内的嵌入式市场一直受终端需求变化的影响而波动&#xff0c;但随着国内产业自主化的发展趋势…
阅读更多...
利用Pycharm将python程序打包为exe文件（亲测可用）

利用Pycharm将python程序打包为exe文件（亲测可用）

最近做了一个关于py的小项目&#xff0c;对利用Pycharm将python文件打包为exe文件不是很熟悉&#xff0c;故学习记录之。 目录 一、下载pyinstaller库 二、打开Pycharm进行打包&#xff08;不更改图标&#xff09; 三、打开Pycharm进行打包&#xff08;更改图标&#xff09…
阅读更多...
python 第一次作业

python 第一次作业

1.使用turtle换一个五环 2.设计这样一个程序&#xff1a;输入一个数字 判断它是不是一个质数 使用turtle换一个五环&#xff1a; >>> import turtle #导入模块 >>> turtle.width(10) #设置圆圈宽度 >>> turtle.color("blue&qu…
阅读更多...
02、Servlet核心技术（下）

02、Servlet核心技术（下）

目录 1 ServletJDBC应用&#xff08;重点&#xff09; 2 重定向和转发&#xff08;重点&#xff09; 2.1 重定向的概述 2.2 转发的概述 3 Servlet线程安全&#xff08;重点&#xff09; 4 状态管理&#xff08;重点 &#xff09; 5 Cookie技术&#xff08;重点&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023