vue+Element学习笔记

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: '',

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用于传到后端接口）

功能实现代码补充说明

<template>
  <div class="root">
    <el-select ref="optionRef" v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="showoptions" type="primary">查看</el-button>
  </div>
</template>

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

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

结果 

 

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

http://t.csdn.cn/CA2Y5

下拉列表选中内容是一个对象，于是百度查阅之后 是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

//引用

npm install moment --save

//使用

import moment from "moment/moment"

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

let date = moment(t).toDate()

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) // 改变了的值
        })
    }
}