建设信用卡网银网站,安卓开发程序,wordpress 判断分类,济南市建设行政主管部门网站目录 引言#xff1a;Vue的插值Vue的指令Vue的过滤器Vue的计算属性和监听器vue购物车案例总结#xff1a; 引言#xff1a;
Vue.js是一款流行的JavaScript框架#xff0c;它提供了许多强大的功能来简化前端开发。在本篇博客中#xff0c;我们将深入探讨Vue的一些高级特性… 目录 引言Vue的插值Vue的指令Vue的过滤器Vue的计算属性和监听器vue购物车案例总结 引言
Vue.js是一款流行的JavaScript框架它提供了许多强大的功能来简化前端开发。在本篇博客中我们将深入探讨Vue的一些高级特性包括插值、指令、过滤器、计算属性和监听器。通过理解和灵活运用这些功能我们可以更好地构建出丰富、高效的Vue应用程序。
Vue的插值
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle/titlestyle.font-30{font-size: 30px;}/style/headbodydiv id app{{msg}}br /hr /html,class绑定-------b :classmsg3 v-htmlmsg2/bbr /hr /表达式----br /{{num1}}br /{{str.substring(2,4)}}br /input v-modelok /{{oktrue?yes:no}}br /hr //divscriptnew Vue({el:#app,data(){return{msg:hello vue,msg2:span stylecolor:redmsg2样式/span,msg3:font-30,num:6,str:沉谭秋叶,ok:true}}})/script/body
/htmlVue的指令
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle/titlestyle.font-30{font-size: 30px;}/style/headbodydiv id appinput v-modelscore /b v-ifscore 60不合格/bb v-else-ifscore 60 score 70及格/bb v-else-ifscore 70 score 80一般/bb v-else-ifscore 80 score 90良好/bb v-else优秀/bbr /hr /v-showb v-showisShowxxx/bbr /hr /v-forb v-fori in arr{{i}}-/bb v-fori in arrs{{i.name}}-{{i}}/b br /hr /selectoption请选择/optionoption v-fori in arrs :valuei.id{{i.name}}/option/selectbr /hr /div v-fori in arrs input typecheckbox namehobby :valuei.id /{{i.name}}/divbr /hr /input v-modelevename/button v-on:[evename]text点击/button/divscriptnew 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
/htmlVue的过滤器
!DOCTYPE html
htmlheadmeta charsetutf-8script srcjquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srcdate.js/scripttitle/title/headbodydiv id app{{msg}}br{{msg | filter1}} br{{msg | filter1 | filter2}}br{{msg | filter3(3,7)}}brhr{{time}}br{{time | filterName}}/divscriptVue.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
/htmlVue的计算属性和监听器
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle/titlestyle.font-30{font-size: 30px;}/style/headbodydiv id app{{msg}}br /hr /单价input v-modelprice/数量input v-modelnum/小计{{count}}br /千米input v-modelkm/br /米input v-modelm//divscriptnew 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
/htmldata.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();
};
vue购物车案例
!DOCTYPE html
html
headtitle购物车/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptstyletable {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
bodydiv idapph1购物车/h1tabletheadtrth商品/thth价格/thth数量/thth小计/thth操作/th/tr/theadtbodytr v-forv in arr td{{ v.name }}/tdtd{{ v.price }}/tdtdinput typenumber v-modelv.quantity inputxj(v)/tdtd{{ v | filter1 }}/tdtd classbtn-groupbutton clickadd(v)/buttonbutton clickjdd(v)-/button/td/tr/tbodytfoottrtd colspan3总计/tdtd{{ total }}/td/tr/tfoot/table/divscriptnew 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 总结
通过本篇博客的学习我们深入理解了Vue的插值、指令、过滤器、计算属性和监听器这些高级特性。这些功能不仅可以帮助我们更好地处理数据绑定和DOM操作还能提升应用程序的性能和开发效率。在实际项目中我们应根据具体需求合理运用这些功能以构建出饱满、高效的Vue应用程序。
