这里我将放一些我做项目的时候碰到不会的如何通过网络找到的解决方法
1.文本溢出隐藏最后以点结尾
- 方法一
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
- 方法二 用于多行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /*截取第一行*/
overflow:hidden;
2.VUE获取后台数据渲染页面常见的两种方式
- input标签通过v-model
v-model双向绑定，一般用于有value值的标签类
<template>
<!-- 联动选择组件 -->
<div>
<el-select @change="changeCity" v-model="film.cityId" filterable placeholder="请选择城市">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="film.districtId" style="margin-left: 20px;" placeholder="请选择区域">
<el-option v-for="item in district" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
import axios from 'axios'
export default {
props:[
'film'
],
data() {
return {
options:[],
district:[]
}
},
created() {
this.getlist();
},
methods: {
getlist(){
const url = process.env.BASE_API +'/city/getList';
axios.get(url,{
params:{}
}).then(res=>{
const cities = res.data.cities;
const arr = cities.map(item=>{
return{
value:item.cityId,
label:item.name
}
})
this.options = arr;
}).catch(error=>{
console.log(error)
})
},
changeCity(cityId){
this.getDistrId(cityId)
this.film.districtId=''
},
getDistrId(cityId){
const url = process.env.BASE_API +'/district/findByCityId';
axios.get(url,{
params:{
cityId
}
}).then(res=>{
const distr = res.data.districts;
const arr = distr.map(item=>{
return{
value:item.objectId,
label:item.name
}
})
this.district = arr;
}).catch(error=>{
console.log(error)
})
}
},
}
</script>
<style>
</style>
- 通过vue指令v-for遍历渲染
v-for(index in 对象) 这种写法是在遍历单个对象的时候用的
v-for((item,index) in 对象|数组) 这种写法是在遍历比较复杂的数组和对象的时候用的
item代表子项(数组对象里的单个数组或对象) index代表下标，用于后续指定下标操作
<div class="list-box" v-for="(film,index) in filmList" :key="index">
<!-- 遍历数组的时候需要子项和下标同时给也就是(子项，下标) -->
<div class="bd-t-gray">
<div class="list fsb mg-t-20">
<div class="mg-l-15">
<img :src="film.poster" alt>
</div>
<div class="fg1 fsb mg-l-15 h100 fg1">
<div class="lh-26">
<div>
<span class="f18">{{film.name}}</span>
<span class="type mg-l-5">{{up(film.item)}}</span>
</div>
<div>
<span class="f12">观众评分</span>
<span class="mg-l-5 red">{{film.grade}}</span>
</div>
<div class="text ofh w100pc h-26">
<span class="f12">主演</span>
<span class="mg-l-5 f12">{{toString(film.actors)}}</span>
<!-- {{toString(film.actors)}} -->
</div>
<div>
<span class="f12">{{film.nation}}|{{film.runtime}}分钟</span>
</div>
</div>
</div>
<div class="fdcc">
<router-link class="btn" to tag="button">购票</router-link>
</div>
</div>
</div>
</div>
<div class="mg-b-70"></div>
</div>
</template>
<script>
export default {
data() {
return {
filmList: []
};
},
created() {
this.getFilmList();
},
methods: {
async getFilmList() {
const url = "/film/getList";
// 要访问第二页的话在网址后面加 ?type=2&pageNum=页数
const res = await this.$http.get(url);
this.filmList = res.films;
},
// JSON数据单独处理,JSON的parse方法用来把JSON数据转成js数据
// 单独取出JSON里的name
up(item){
const a = JSON.parse(item)
let b = a.name;
return b;
},
// 拼接多个字符串
toString(actors){
const a = JSON.parse(actors);
let str = '';
for(let i=0;i<a.length;i++){
let b = a[i].name + ' '
str += b;
}
return str;
}
}
};
</script>
- 上述例子里还有JSON转化成js然后获取到数据
- 以及提取多个字符串时需要的字符串拼接
- 取小数点后几位数
toFixed方法
需求：取num小数点后两位，四舍五入
var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45
不四舍五入的方法有
先转化成整数再除
Math.floor(15.7784514000 * 100) / 100 // 输出结果为 15.77
网友评论