vue+element笔记

最新推荐文章于 2024-04-22 12:27:49 发布

北海顾鱼

最新推荐文章于 2024-04-22 12:27:49 发布

阅读量1.5k

点赞数

分类专栏： vue框架文章标签： vue elementui

本文链接：https://blog.csdn.net/guyuanyu/article/details/127589973

版权

vue框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、el-select获取key

<div class="recommend-city-more">
      <el-select v-model="selectCityName" placeholder="更多" @change="searchHotelByCity">
          <el-option 
            v-for="item in cities"
            :key="item.cid"
            :label="item.cityname"
            :value="item.cid">
            <span style="float: left">{{ item.cityname}}</span>
          </el-option>
       </el-select>   
</div>

数据绑定结果分析

selectCityName: '',//data()return中数据
methods: {
   searchHotelByCity(cid){
   console.log(cid,'城市id')//获取的是 :value   结果：10 '城市id'   
   console.log(this.selectCityName,'城市id')   结果：10 '城市id'
 }
},

:label=“item.cityname” ==> 选择框所显示的内容
:key=“item.cid” ==> 索引值
:value=“item.cid” ==> 选择v-model：绑定的内容这里v-model=“selectCityName” 绑定的是索引值，这里是cid
vue中el-select获取value和label

1.需要实现的效果（点击查看后获取对应的value和label用于传到后端接口）

功能实现代码补充说明

具体UI渲染出来后，就可以为el-button写一个click函数，用于取el-select的值（！！！这个是借助ref，所以在上文的vue组件中一定要为el-select绑定一个ref，才能在下面的函数中获取对应的值）

showoptions() {
       console.log(
              this.$refs.optionRef.selected.value,
              this.$refs.optionRef.selected.label
       );
}

结果

还有一个进一步说明的方式

下拉列表选中内容是一个对象，于是百度查阅之后是value-key即可实现。

<template>
	<el-select v-model="eventLabelValue" multiple placeholder="请选择" value-key="id" @change="changeData">
		<el-option v-for="item in eventLabelList" :key="item.id" :label="item.name" :value="item" />
	</el-select>
</template>
 
 
<script>
export default{
	data() {
		return {
			eventLabelValue: [],
			eventLabelList: [{
				id: 1,
				name: '攻击成功'
			},{
				id: 2,
				name: '攻击失败'
			},{
				id: 3,
				name: '不予处置'
			}]
		}
	},
	methods:{
		changeData(data){
			console.log(JSON.stringify(data));
		},
	}
}
</script>

2、vue计算长度与三元运算

<!-- 酒店名字 -->
<div class="hotel-lists-item-name">
   {{hotel.hname.length >= 7 ? hotel.hname.slice(0,7)+'...' : hotel.hname }}
</div>

3、进入页面时，重新刷新一次页面（用于需要在页面需要重新刷新一次的才能展现出效果的场景）

mounted(){
  // 进入页面后重新刷新一次页面
   if (window.location.href.indexOf("#reloaded") == -1) {
       window.location.href = window.location.href + "#reloaded";
        window.location.reload();
   }
 },

4、处理时间计算出现NAN问题

原因：计算时间戳需要的是Date类型数据，这里我在进行时间传递时，date类型自动转化成了String类型数据，故需要将时间由String类型转化为Date类型后再进行操作

1.vue中先引入npm install moment --save

2.//利用moment工具生成date对象

5、: span 与: gutter区别

:span是每个元素所占此row比例，一行是24
:gutter是该row内元素之间的间隙，也就是col占6，gutter占6中的20px

6、this.$nextTick这个方法作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来

methods：{
    testClick() {
        this.content = '改变了的值'
        this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            console.log(this.$refs.tar.innerText) // 改变了的值
        })
    }
}