表单开发肯定是日常开发中必不可少的环节,可是设计图经常会有表单默认值的设计,比如:
需求方的需求点是:在没有输入值的时候显示默认值,在输入值的时候显示输入值。
通常就能想到用placeholder
来解决这个问题,并且通常会用v-model
来绑定data
中的值。然后,data
的值再设定默认值为空
//script data(){ return { index:0, name:'' } } //template <input type="number" placeholder="默认值index" v-model="index"/> <input type="text" placeholder="默认值name" v-model="name"/>
以上这种效果是,第一个input的placeholder的值显示不出,显示了index的值:0,不符合需求
第二种能显示placeholder的值,需求满足。
但是一些复杂的需求,比如,让用户选择城市名(city)和国家名(country),最后在一个变量(countryAndCity)上显示,这个时候就要用computed
//template <input type="text" placeholder="城市" v-model="city"/> <input type="text" placeholder="国家" v-model="country"/> <input type="text" placeholder="国家+城市" v-model="countryAndCity"/> //script data(){ return { city:'', country:'' } }, computed:{ countryAndCity () { let str = '' if(this.city && this.country){ str = `${this.city}+${this.country}` } return str } }
在上面就需要做个判断,当city和country有值的情况才显示结果,否则显示placeholder的值。
诸如经过设计师设计的单选和多选按钮
单选按钮就比较简单了
//template <li v-for="item, index in list" :class="{"active":currentIndex === index}" @click="select(index)">{{item}}</li> //script data(){ return { currentIndex:0, list:['aa','bb','cc','dd'] } }, methods:{ select(index){ this.currentIndex = index } }
上面很简单,大概看看就懂了,这是单选的情况,那要是多选的情况呢,那就要换个思路了
首先换个数据格式
data(){ return { list:[ {text:'aa',isActive:false}, {text:'bb',isActive:false} {text:'cc',isActive:false}' ] } }, methods:{ select(index){ this.list[index].isActive = !this.list[index].isActive } }
然后template就要变成这样
<li v-for="(item, index) in list" :class="{"active":item.isActive}" @click="select(index)">{{item.text}}</li>
动态组件一般很少用到,但是要做动态引入组件的时候真的超级好用。之前做过的组件配置系统核心就是它。我用的是一个动态组件循环,然后用is获取组件名,用props获取各个组件的自定义props
<components :is="item.name" v-for="item, index in componentList" :props="item.props"></components> componentList:[{ name:'index',props:{title:'title'}}]
created和mounted在客户端渲染时期window对象都是存在的,所以可以直接操作。
但是在服务端渲染时期,它们两者的window都是不存在的,所以要加一句判断,在所有逻辑前面
if(typeof window !== 'object') return ;
基于组件化思维,很多时候我们会把一个页面拆分成几个组件,然后会提取一些公用的组件,比如dialog弹窗组件,他的打开和关闭,都是根据引用组件页面的data的一个值来决定,
//app.vue <dialog v-if="isDialog"></dialog> data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true } }
但是关闭按钮通常是写在dialog组件内部的,也就是说,在引用组件页面是没有这个按钮可以点击的,
所以,可以在dialog里面将点击时间的信号传递出来,引用组件页面接收到了信号,再控制关闭
//dialog.vue <p @click="close"> 点击关闭 </p> methods:{ close() { this.$emit('close') } } //app.vue <dialog v-if="isDialog" @close="closeDialog"></dialog> data(){ return { isDialog:false } } methods:{ showDialog(){ this.isDialog = true }, closeDialog(){ this.isDialog = false } }
大致的思路就是把真正关闭的操作,放在isDialog
的页面,方便操作。
后续还会出一个不这样引用,直接在methods的方法中引用的公用组件写法,敬请期待
vue中的css可以用scoped这个关键子来限制css的作用域
<style scoped>...</style>
这个日常就会用到,因为这样就不用考虑class的命名会重合,加上使用sass、less、stylus、postcss等css处理器,效果简直杠杠的。
但是如果你想改动到body这个元素的css样式,但是又不想改动公用layout模板。那你就可以在一个vue文件写两个style
标签
<style> body{...} </style> <style scoped> .. .</style>
相关推荐:
以上是值得收藏的vue开发技巧实例的详细内容。更多信息请关注PHP中文网其他相关文章!