为什么选择做游戏网站,南昌h5建站,淘宝网站建设多少钱,集安网站制作#x1f3ac; 艳艳耶✌️#xff1a;个人主页 #x1f525; 个人专栏 #xff1a;《Spring与Mybatis集成整合》《springMvc使用》 ⛺️ 生活的理想#xff0c;为了不断更新自己 ! 目录 1.插值
1.1 文本
1.2 v-v-html
1.3 数据双向绑定数据(v-model)
1.4 属性#xff… 艳艳耶✌️个人主页 个人专栏 《Spring与Mybatis集成整合》《springMvc使用》 ⛺️ 生活的理想为了不断更新自己 ! 目录 1.插值
1.1 文本
1.2 v-v-html
1.3 数据双向绑定数据(v-model)
1.4 属性v-bind
1.5 表达式
1.6 class绑定
1.7 style绑定
1.8复选框
1.9下拉框
2.指令
2.1 v-if|v-else|v-else-if
2.2 v-show
2.3 v-for
2.4 动态参数
3.过滤器
3.1.局部过滤器
3.2.全局过滤器
4.计算属性监听属性
4.1.计算属性
4.2.监听属性
5.购物车案列简单版本
今日分享就结束 1.插值
1.1 文本
插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入JS代码片段 语法{{ 变量名/对象.属性名 }} p文本/p {{msg}} br/
script typetext/javascriptnew Vue({el:#app,data(){return{msg:hello a,}}})/script
结果 1.2 v-v-html
v-html专门用来展示数据, 其作用和插值表达式类似但可以避免插值闪烁问题。
当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
插值闪烁: 在数据未加载完成时页面会显示出原始的{{}}, 过一会才会展示正常数据.
语法
phtml解析/p {{msg2}}br/ 区别 v-text/{{变量名/对象.属性名}}把数据当作纯文本显示.v-html遇到html标签,会正常解析 1.3 数据双向绑定数据(v-model) Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候数据也会自动变化. 注意 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等文本框/单选按钮/textarea, 绑定的数据是字符串类型单个复选框, 绑定的是boolean类型 多个复选框, 绑定的是数组 select单选对应字符串多选对应也是数组 1.4 属性v-bind HTML属性中的值应使用v-bind指令
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle插值/titlestyle typetext/css.f30{font-size: 50px;}/style/headbodydiv idapp!-- p文本/p {{msg}} br/ --phtml解析/p {{msg2}}br/b :classmsg3 v-htmlmsg2/b!-- p表达式/p {{num1}}{{warn.substr(0,6)}}input v-modelok/{{ok1? 闪开 :不闪开}} --/divscript typetext/javascriptnew Vue({el:#app,data(){return{// msg:hello a,msg2:span stylecolor:pink玛卡玛卡我是个小聪明/span,msg3:f30,// num:6,// warn:公主驾到通通闪开,// ok:1}}})/script/body
/html
结果 1.5 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number 1 }} {{ ok ? YES : NO }} li v-bind:idlist- id我的Id是js动态生成的/li 代码 p表达式/p {{num1}}{{warn.substr(0,6)}}input v-modelok/{{ok1? 闪开 :不闪开}}num:6,warn:公主驾到通通闪开,ok:1结果 1.6 class绑定 使用方式v-bind:classexpression expression的类型字符串、数组、对象
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle插值/titlestyle typetext/css.f30{font-size: 50px;}/style/headbodydiv idapp!-- p文本/p {{msg}} br/ --phtml解析/p {{msg2}}br/b :classmsg3 v-htmlmsg2/b!-- p表达式/p {{num1}}{{warn.substr(0,6)}}input v-modelok/{{ok1? 闪开 :不闪开}} --/divscript typetext/javascriptnew Vue({el:#app,data(){return{// msg:hello a,msg2:span stylecolor:pink玛卡玛卡我是个小聪明/span,msg3:f30,// num:6,// warn:公主驾到通通闪开,// ok:1}}})/script/body
/html
结果
1.7 style绑定 v-bind:styleexpression expression的类型字符串、数组、对象
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle插值/titlestyle typetext/css.f30{font-size: 50px;}/style/headbodydiv idapp!-- p文本/p {{msg}} br/ --phtml解析/p {{msg2}}br/b :classmsg3 v-htmlmsg2/b!-- p表达式/p {{num1}}{{warn.substr(0,6)}}input v-modelok/{{ok1? 闪开 :不闪开}} --/divscript typetext/javascriptnew Vue({el:#app,data(){return{// msg:hello a,msg2:span stylecolor:pink玛卡玛卡我是个小聪明/span,msg3:f30,// num:6,// warn:公主驾到通通闪开,// ok:1}}})/script/body
/html
结果 1.8复选框
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle指令/title/headbodydiv idapp!-- pv-if/v-else-if/v-else/pinput v-modelscore/br /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优秀/b --!-- 60以下不及格60-70及格70-80一般80-90良好90-100优秀--!-- pv-show/pv-if与v-show的区别brb v-ifisShow展示/bb v-showisShow展示/b --!-- pv-for/pi v-fora in arr{{a}}nbsp;nbsp;/i i v-fora,u in users{{a.name}}nbsp;nbsp;/i --!-- p下拉框/p selectoption v-forh in hobby :valueh.id{{h.name}}/option/select -- p多选框/pdiv id v-forh in hobbyinput typecheckbox namehobby :valueh.id/{{h.name}}/div!-- p动态参数/pinput v-modelclick/button v-on:[evname]test点我/button --/divscript typetext/javascriptnew Vue({el:#app,data(){return{score:88,isShow:false,// arr:[1,2,3,4],users:[{name:游乐场,id:1},{name:水上世界,id:2},{name:k歌,id:3},{name:动物园,id:4}],hobby:[{name:吃汉堡,id:1},{name:吃炸鸡,id:2},{name:喝可乐,id:3},{name:吃薯条,id:4}],evname:click}},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 1.9下拉框
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle指令/title/headbodydiv idapp!-- pv-if/v-else-if/v-else/pinput v-modelscore/br /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优秀/b --!-- 60以下不及格60-70及格70-80一般80-90良好90-100优秀--!-- pv-show/pv-if与v-show的区别brb v-ifisShow展示/bb v-showisShow展示/b --!-- pv-for/pi v-fora in arr{{a}}nbsp;nbsp;/i i v-fora,u in users{{a.name}}nbsp;nbsp;/i --p下拉框/p selectoption v-forh in hobby :valueh.id{{h.name}}/option/select !-- p多选框/pdiv id v-forh in hobbyinput typecheckbox namehobby :valueh.id/{{h.name}} --/div!-- p动态参数/pinput v-modelclick/button v-on:[evname]test点我/button --/divscript typetext/javascriptnew Vue({el:#app,data(){return{score:88,isShow:false,// arr:[1,2,3,4],users:[{name:游乐场,id:1},{name:水上世界,id:2},{name:k歌,id:3},{name:动物园,id:4}],hobby:[{name:吃汉堡,id:1},{name:吃炸鸡,id:2},{name:喝可乐,id:3},{name:吃薯条,id:4}],evname:click}},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 2.指令
2.1 v-if|v-else|v-else-if
根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle指令/title/headbodydiv idapppv-if/v-else-if/v-else/pinput v-modelscore/br /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优秀/b!-- 60以下不及格60-70及格70-80一般80-90良好90-100优秀--!-- pv-show/pv-if与v-show的区别brb v-ifisShow展示/bb v-showisShow展示/bpv-for/pi v-fora in arr{{a}}nbsp;nbsp;/i i v-fori,u in users{{u.name}}nbsp;nbsp;;{{i}}/i p下拉框/pselectoption v-forh in hobby :valueh.id{{h.name}}/option/select --!-- p多选框/pdiv id v-forh in hobbyinput typecheckbox namehobby :valueh.id/{{h.name}}/div --!-- p动态参数/pinput v-modelclick/button v-on:[evname]test点我/button --/divscript typetext/javascriptnew Vue({el:#app,data(){return{score:88,isShow:false,arr:[1,2,3,4],users:[{name:huahua,id:1},{name:xiaomei,id:2},{name:yanyan,id:3},{name:heihei,id:4}],hobby:[{name:吃汉堡,id:1},{name:吃炸鸡,id:2},{name:喝可乐,id:3},{name:吃薯条,id:4}],evname:click}},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 2.2 v-show v-show指令与v-if指令类似用于根据表达式的值来控制元素的显示和隐藏。当v-show指令的表达式的值为false时元素会被渲染为不可见状态并且会添加CSS样式display:none。这意味着该元素在页面上不会占据空间并且不会显示给用户。 然而v-show指令与加载出页面是不同的。当使用v-if指令时如果条件为false对应的元素将从DOM中完全移除并且不会加载到页面上。 代码
b v-ifisShow展示/b
b v-showisShow展示/b
2.3 v-for 类似JS的遍历 遍历数组: v-foritem in items, items是数组item为数组中的数组元素 遍历对象: v-for(value,key,index) in stu, value属性值,key属性名index下标
语法
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle指令/title/headbodydiv idapp!-- pv-if/v-else-if/v-else/pinput v-modelscore/br /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优秀/b --!-- 60以下不及格60-70及格70-80一般80-90良好90-100优秀--!-- pv-show/pv-if与v-show的区别brb v-ifisShow展示/bb v-showisShow展示/b --pv-for/pi v-fora in arr{{a}}nbsp;nbsp;/i i v-fora,u in users{{a.name}}nbsp;nbsp;/i!-- p下拉框/pselectoption v-forh in hobby :valueh.id{{h.name}}/option/select p多选框/pdiv id v-forh in hobbyinput typecheckbox namehobby :valueh.id/{{h.name}}/div --!-- p动态参数/pinput v-modelclick/button v-on:[evname]test点我/button --/divscript typetext/javascriptnew Vue({el:#app,data(){return{score:88,isShow:false,arr:[1,2,3,4],users:[{name:游乐场,id:1},{name:水上世界,id:2},{name:k歌,id:3},{name:动物园,id:4}],hobby:[{name:吃汉堡,id:1},{name:吃炸鸡,id:2},{name:喝可乐,id:3},{name:吃薯条,id:4}],evname:click}},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 2.4 动态参数 从2.6.0开始可以用方括号括起来的JavaScript表达式作为一个指令的参数 a v-bind:[attrname]url ... /a 同样地你可以使用动态参数为一个动态的事件名绑定处理函数 a v-on:[evname]doSomething ... /a
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle指令/title/headbodydiv idapp!-- pv-if/v-else-if/v-else/pinput v-modelscore/br /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优秀/b --!-- 60以下不及格60-70及格70-80一般80-90良好90-100优秀--!-- pv-show/pv-if与v-show的区别brb v-ifisShow展示/bb v-showisShow展示/b --!-- pv-for/pi v-fora in arr{{a}}nbsp;nbsp;/i i v-fora,u in users{{a.name}}nbsp;nbsp;/i --!-- p下拉框/p selectoption v-forh in hobby :valueh.id{{h.name}}/option/select p多选框/pdiv id v-forh in hobbyinput typecheckbox namehobby :valueh.id/{{h.name}}/div --p动态参数/pinput v-modelclick/button v-on:[evname]test点我/button/divscript typetext/javascriptnew Vue({el:#app,data(){return{score:88,isShow:false,// arr:[1,2,3,4],users:[{name:游乐场,id:1},{name:水上世界,id:2},{name:k歌,id:3},{name:动物园,id:4}],hobby:[{name:吃汉堡,id:1},{name:吃炸鸡,id:2},{name:喝可乐,id:3},{name:吃薯条,id:4}],evname:click}},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 3.过滤器
3.1.局部过滤器
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srcdate.js typetext/javascript charsetutf-8/scripttitle过滤器/title/headbodydiv idappp局部过滤器基本应用/p{{msg}}br /{{msg | filterA}}!-- p局部过滤器串行使用/p{{msg}}br /{{msg | filterA| filterB}}p局部过滤器传参/p{{msg | filterC(1,4)}}br / --p全局过滤器/p{{time}}br /{{time | fmtDateFilter}}/divscript typetext/javascriptVue.filter(fmtDateFilter,function(value) {// value表示过滤的内容return fmtDate(value);});new Vue({el:#app,filters:{filterA:function(v){return v.substring(0,6);},filterB:function(v){return v.substring(2,4);},filterC:function(v,begin,end){return v.substring(begin,end);}},data(){return{msg:公主驾到通通闪开,time:new Date()};},methods:{test(){// 单击事件alert(公主驾到通通闪开)}}})/script/body
/html
结果 注意 过滤器函数接受表达式的值作为第一个参数 过滤器可以串联 {{ message | filterA | filterB }} 过滤器是JavaScript函数因此可以接受参数 {{ message | filterA(arg1, arg2) }} js定义一个类 function Stu(){}; Stu.prototype.add(a,b){};//添加一个新的实例方法 Stu.update(a,b){};//添加一个新的类方法 3.2.全局过滤器
代码
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.计算属性监听属性
4.1.计算属性
计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用
代码
{!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle计算属性/title/headbodydiv idappp计算属性/p 单价input v-modelprice/数量input v-modelnum/小计{{count}}/divscript typetext/javascriptnew Vue({el:#app,data(){return{price:88,num:1};},computed:{count:function(){return this.price * this.num;}}})/script/body
/html
结果 4.2.监听属性 watch可以监听简单属性值及其对象中属性值的变化
watch类似于onchange事件,可以在属性值修改的时候,执行某些操作
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle计算属性/title/headbodydiv idapp!-- p计算属性/p 单价input v-modelprice/数量input v-modelnum/小计{{count}} --p监听属性/p 千米input v-modelkm /br /米input v-modelm //divscript typetext/javascriptnew Vue({el:#app,data(){return{price:88,num:1,m:1000,km:1};},computed:{count:function(){return this.price * this.num;}},watch:{km:function(v){// V指的是被监听的属性是kmthis.m parseInt(v) *1000;},m:function(v){// V指的是被监听的属性是m this.km parseInt(v) /1000;}}})/script/body
/html
结果 5.购物车案列简单版本
代码
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle购物车/title/headbodydiv idapph1 styletext-align: center;购物车/h1table border1 stylewidth: 100%; height: 80px;text-align: center; theadtrth商品/thth单价/thth数量/thth小计/th/tr /theadtbodytrtd炸鸡/tdtd{{priceA}}/tdtdbutton clickgooddelA-/button{{numA}}button clickgoodaddA/button/tdtd{{countA}}/td/trtrtd炸薯条/tdtd{{priceB}}/tdtdbutton clickgooddelB-/button{{numB}}button clickgoodaddB/button/tdtd{{countB}}/td/trtrtd汉堡/tdtd{{priceC}}/tdtdbutton clickgooddelC-/button{{numC}}button clickgoodaddC/button/tdtd{{countC}}/td/tr/tbodytfoottrtd colspan3总价/tdtd{{total}}/td/tr/tfoot/table/divscriptnew Vue({el: #app,data: {priceA:30,priceB:10,priceC:20,numA:1,numB:1,numC:1},computed: {countA:function(){return this.priceA * this.numA;},countB:function(){return this.priceB * this.numB;},countC:function(){return this.priceC * this.numC;},total:function(){return this.countA this.countB this.countC;}},methods: {goodaddA: function() {return this.numA;},goodaddB: function() {return this.numB;},goodaddC: function() {return this.numC;},gooddelA: function() {if(this.numA1){return this.numA--;}},gooddelB: function() {if(this.numB1){return this.numB--;}},gooddelC: function() {if(this.numC1){return this.numC--;}},}});/script/body
/html
结果 今日分享就结束
