长安公司网站设计,上海专业网站建设市场,手机看黄山网站,如何免费建购物网站v-if
在双引号中写判断条件。
div v-ifscore90A/div
div v-else-ifscore80B/div
div v-elseC/divv-on:
:冒号后面跟着事件。 为了简化#xff0c;可以直接用代替v-on:。
事件名“内联语…v-if
在双引号中写判断条件。
div v-ifscore90A/div
div v-else-ifscore80B/div
div v-elseC/divv-on:
:冒号后面跟着事件。 为了简化可以直接用代替v-on:。
事件名“内联语句”事件名“methods中的函数名”
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idappbutton v-on:clickscore---/buttonspan clickreset(89){{score}}/spanbutton v-on:clickscore/button
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {score: 89},methods:{reset(e){this.scoree;},}})
/script上面代码中score上面的click也是可以触发的不必是按钮。 如果不加this访问的是全局变量。 可以调用传参。
:v-bind:
设置html标签属性。 可以用:简写
:属性名“表达式”
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idappimg :srcimgUrl alt
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {score: 89,imgUrl:https://avatars.githubusercontent.com/u/65584776?v4},})
/script操作class
:class“对象/数组”
对象键是类名值是布尔值。适合一个类名来回切换。数组数组中的所有类都会添加到盒子中。适合批量添加或删除类。
v-for
基于数据循环多次渲染整个元素。 遍历数组v-for(item,index) in list in前后都有空格
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idappulli v-for(item,index) in list:keyitem.idindex:{{index}}-id:{{item.id}}button clickdel(item.id)del/button/li/ul
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {list: [{id:1},{id:2},{id:3},{id:4},{id:5}]},methods:{del(id){this.listthis.list.filter(itemitem.id!id)}}})
/scriptv-for中的key给元素添加唯一标识。只能是字符串和数字。 不加key原地修改元素就地复用。
v-model
给表单元素使用双向数据绑定可以快速获取或设置表单元素内容。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idappbrspan输入/spaninput typetext name id v-modelnumberbr单选input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女br复选input typecheckbox v-modelisCheck是否选中br下拉菜单select v-modelselected name idoption value1A/optionoption value2B/optionoption value3C/optionoption value4D/option/select
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {number: ,gender: 2,isCheck: true,selected: 2}})
/script计算属性
基于现有的属性计算出新的属性。依赖的数据变化自动重新计算。 声明在computed配置项中一个计算属性对应一个函数。 本质上属性插值表达式中不能带括号()。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idapp{{total}}
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {list:[1,2,3,4]},computed:{total(){return this.list.reduce((sum,item)sumitem,0)}}})
/script数组实例的 reduce() 方法会在数组的每个元素上依次执行用户提供的 reducer 回调函数并传入前一个元素的计算返回值。在数组的所有元素上运行还原器的最终结果是一个单一的值。
vs methods computed计算属性 封装了一段对于数据的处理求得一个结果。
写在computed中作为属性直接使用this.计算属性 methods方法 给实例提供一个方法调用以处理业务逻辑。
写在methods中作为方法直接使用this.方法名()事件名“方法名” 缓存特性 计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变了会自动重新计算并再次缓存
计算属性的完整写法
计算属性默认的简写只能读取访问不能修改。 如果要修改需要写计算属性的完整写法。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idapp姓{{lastName}} br名{{firstName}} br姓名input typetext name id v-modeluserName
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {lastName: ,firstName: },computed: {userName: {get() {console.log(get);return this.lastName this.firstName;},set(name) {console.log(set);this.lastName name[0];this.firstName name.slice(1, name.length);}}}})
/scriptwatch监视器
类似于Qt的信号槽。 监视数据变化执行一些业务逻辑或异步操作。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idappinput typetext name id v-modelvalueulli v-for(item) in list{{item}}/li/ul/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {value:,list:[]},watch:{value(oldValue,newValue){this.list.push(修改前oldValue-修改后newValue);}}})
/script可能需要搭配timeout防抖。
