-
“Vue进阶：深入理解插值、指令、过滤器、计算属性和监听器“
引言：
Vue.js是一款流行的JavaScript框架，它提供了许多强大的功能来简化前端开发。在本篇博客中，我们将深入探讨Vue的一些高级特性，包括插值、指令、过滤器、计算属性和监听器。通过理解和灵活运用这些功能，我们可以更好地构建出丰富、高效的Vue应用程序。
Vue的插值
DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <title>title> <style> .font-30{ font-size: 30px; } style> head> <body> <div id = "app"> {{msg}}<br /><hr /> html,class绑定-------<b :class="msg3" v-html="msg2">b><br /><hr /> 表达式----<br /> {{num+1}}<br /> {{str.substring(2,4)}}<br /> <input v-model="ok" /> {{ok==true?'yes':'no'}}<br /><hr /> div> <script> new Vue({ el:"#app", data(){ return{ msg:'hello vue', msg2:'msg2样式', msg3:'font-30', num:6, str:'沉谭秋叶', ok:true } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
Vue的指令
DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <title>title> <style> .font-30{ font-size: 30px; } style> head> <body> <div id = "app"> <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> <br /><hr /> v-show <b v-show="isShow">xxxb> <br /><hr /> v-for <b v-for="i in arr">{{i}}-b> <b v-for="i in arrs">{{i.name}}-{{i}}=b> <br /><hr /> <select> <option>请选择option> <option v-for="i in arrs" :value="i.id">{{i.name}}option> select> <br /><hr /> <div v-for="i in arrs"> <input type="checkbox" name="hobby" :value="i.id" />{{i.name}} div> <br /><hr /> <input v-model="evename"/> <button v-on:[evename]="text">点击button> div> <script> new Vue({ el:"#app", data(){ return{ score:69, isShow:false, arr:['a','b','c','d'], arrs:[{name:'小王',id:1},{name:'小李',id:2},{name:'小桂',id:3},{name:'小勇',id:4}], evename:'click' } },methods:{ text(){ alert('点击了！！') } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
Vue的过滤器
DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="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"> {{msg}}<br> {{msg | filter1}} <br> {{msg | filter1 | filter2}}<br> {{msg | filter3(3,7)}}<br> <hr> {{time}}<br> {{time | filterName}} div> <script> Vue.filter('filterName', function (value) { // value 表示要过滤的内容 return fmtDate(value); }); new Vue({ el:"#app", filters:{ 'filter1':function(v){ return v.substring(0,5) }, 'filter2':function(v){ return v.substring(1,3) }, 'filter3':function(v,begin,end){ return v.substring(begin,end) } }, data(){ return{ msg:'允许你自定义过滤器，被用作一些常见的文本格式化，格式如下', time:new Date() } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
Vue的计算属性和监听器
DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <title>title> <style> .font-30{ font-size: 30px; } style> head> <body> <div id = "app"> {{msg}}<br /><hr /> 单价<input v-model="price"/> 数量<input v-model="num"/> 小计{{count}} <br /> 千米<input v-model="km"/><br /> 米<input v-model="m"/> div> <script> new Vue({ el:"#app", data(){ return{ msg:'hello vue', price:88, num:1, m:1000, km:1 } },computed:{ count:function(){ return this.price*this.num } },watch:{ km:function(v){ this.m = parseInt(v)*1000; }, m:function(v){ this.km = parseInt(v)/1000; } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
data.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(); };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
vue购物车案例
DOCTYPE html> <html> <head> <title>购物车title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .btn-group { display: flex; justify-content: space-between; } style> head> <body> <div id="app"> <h1>购物车h1> <table> <thead> <tr> <th>商品th> <th>价格th> <th>数量th> <th>小计th> <th>操作th> tr> thead> <tbody> <tr v-for="v in arr" > <td>{{ v.name }}td> <td>{{ v.price }}td> <td> <input type="number" v-model="v.quantity" @input="xj(v)"> td> <td>{{ v | filter1 }}td> <td class="btn-group"> <button @click="add(v)">+button> <button @click="jdd(v)">-button> td> tr> tbody> <tfoot> <tr> <td colspan="3">总计td> <td>{{ total }}td> tr> tfoot> table> div> <script> new Vue({ el: '#app', data: { arr: [ { name: '尿不湿', price: 49, quantity: 1, subtotal: 49 }, { name: '狼牙棒', price: 28, quantity: 1, subtotal: 28 }, { name: '鸡毛卷', price: 36, quantity: 1, subtotal: 36 } ] }, computed: { total: function() { return this.arr.reduce((sum, v) => sum + v.subtotal, 0); } }, methods: { xj: function(v) { v.subtotal = v.price * v.quantity; }, add: function(v) { v.quantity++; this.xj(v); }, jdd: function(v) { if (v.quantity > 0) { v.quantity--; this.xj(v); } } }, filters: { 'filter1': function(v) { return v.price * v.quantity; } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
总结：
通过本篇博客的学习，我们深入理解了Vue的插值、指令、过滤器、计算属性和监听器这些高级特性。这些功能不仅可以帮助我们更好地处理数据绑定和DOM操作，还能提升应用程序的性能和开发效率。在实际项目中，我们应根据具体需求合理运用这些功能，以构建出饱满、高效的Vue应用程序。
-
相关阅读:
Docker+K3S搭建集群
机器学习（六）支持向量机SVM
SpringMVC之CRUD(增删改查)
Junit5单元测试Service中的方法
【牛客刷题-算法】加精 | 合并两个有序的链表 - 从思路设计、bug排除到最终实现的全过程
服务框架-day01-SpringCloud
【矩阵论】4. 矩阵运算——张量积
nginx的location的优先级和匹配方式和nginx的重定向
pycharm-debug 模式修改代码无需重新启动程序用法
hadoop详解
- 原文地址：https://blog.csdn.net/2201_75869073/article/details/133017134
