成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

vue+iview之select和時(shí)間日期的使用

tainzhi / 1354人閱讀

摘要：實(shí)現(xiàn)從后臺(tái)獲取數(shù)據(jù)，并賦值默認(rèn)值，同時(shí)也可以對(duì)選框進(jìn)行更改，即實(shí)現(xiàn)雙向綁定使用和方式實(shí)現(xiàn)雙向綁定，如下請(qǐng)選擇開(kāi)始時(shí)間和結(jié)束時(shí)間獲取默認(rèn)時(shí)間將后臺(tái)傳回的默認(rèn)時(shí)間數(shù)據(jù)放在時(shí)間選擇框內(nèi)按照后臺(tái)傳回的數(shù)據(jù)，將斜杠前的時(shí)間作為初始時(shí)間按照

實(shí)現(xiàn)從后臺(tái)獲取數(shù)據(jù)，并賦值默認(rèn)值，同時(shí)也可以對(duì)選框進(jìn)行更改，即實(shí)現(xiàn)雙向綁定

1、使用value和on-change方式實(shí)現(xiàn)雙向綁定，html如下：

js：

data(){
    return{
        userGetInitTime: [], // 獲取默認(rèn)時(shí)間
    }
}
mounted(){
    this.$api.post(USERPORTRAIT1).then(res => {
        console.log(res.data)
        this.userList = res.data.data_type;
        // this.chartList = res.data.graph_type;

        this.userForm.userSelectModel = res.data.data_type[2].value;

        // 將后臺(tái)傳回的默認(rèn)時(shí)間數(shù)據(jù)放在時(shí)間選擇框內(nèi)
        let times = res.data.time.split("/");
        let sTime = times[0];  // 按照后臺(tái)傳回的數(shù)據(jù)，將斜杠前的時(shí)間作為初始時(shí)間
        let eTime = times[1]; // 按照后臺(tái)傳回的數(shù)據(jù)，將斜杠后的時(shí)間作為結(jié)束時(shí)間
        this.userGetInitTime = [new Date(sTime), new Date(eTime)]; // 以new Date()格式將時(shí)間放進(jìn)時(shí)間選框

      }).catch(res => {

      })
},
methods: {
  handleUserSubmit(){
    this.$refs.userForm.validate( valid => {
      if(valid){

        const data = {
          data_type: this.userForm.userSelectModel,
          time: this.userGetInitTime[0]+ "/" + this.userGetInitTime[1],
        };
        console.log("userGetInitTime",this.time)
        this.$api.post(USERPORTRAIT2, data).then(res => {
          this.userList = res.data.data_type;
          this.userImg = res.data.image;
        }).catch(res => {

        })
      }
    })
  },
  handleDatesChange(array){
    this.userGetInitTime = array;
    console.log(array);
  }
}
2、使用v-model實(shí)現(xiàn)雙向綁定：

html:

js:

 data() {
  return {
    domainGetInitTime: [],  // 存放后太回傳的默認(rèn)值
 }
},
mounted() {
  this.$api.post(DOMAIN1).then(res => {
    console.log(res.data);
    this.domainImage = res.data.image;
    this.data_type = res.data.data_type;
    this.graph_type = res.data.graph_type;

    this.domainForm.domainSelect = res.data.data_type[2].value;  // 默認(rèn)初始化選項(xiàng)
    this.domainForm.domainChartSelect = res.data.graph_type[0].value;  // 默認(rèn)初始化選項(xiàng)
    // 將后臺(tái)傳回的默認(rèn)時(shí)間數(shù)據(jù)放在時(shí)間選擇框內(nèi)
    let times = res.data.time.split("/");
    let sTime = moment(times[0], "YYYY-MM-DD HH:mm:ss").toDate();  // 按照后臺(tái)傳回的數(shù)據(jù)，將斜杠前的時(shí)間作為初始時(shí)間
    let eTime = moment(times[1], "YYYY-MM-DD HH:mm:ss").toDate(); // 按照后臺(tái)傳回的數(shù)據(jù)，將斜杠后的時(shí)間作為結(jié)束時(shí)間
    this.domainGetInitTime = [sTime, eTime]; // 以new Date()格式將時(shí)間放進(jìn)時(shí)間選框
  }).catch(res => {
  });
},
methods: {
  // 向后臺(tái)提交請(qǐng)求
  handleSubmit() {
    this.$refs.domainForm.validate(valid => {
      if (valid) {

        console.log("domainGetInitTime", this.domainGetInitTime)
        const data = {
          time: moment(this.domainGetInitTime[0]).format("YYYY-MM-DD HH:mm:ss")+"/"+moment(this.domainGetInitTime[1]).format("YYYY-MM-DD HH:mm:ss"),
          data_type: this.domainForm.domainSelect,
          graph_type: this.domainForm.domainChartSelect
        };

        // 根據(jù)參數(shù)獲取后臺(tái)的值
        this.$api.post(DOMAIN2, data).then(res => {
          this.data_type = res.data.data_type;
          this.graph_type = res.data.graph_type;
          this.domainImage = res.data.domain_image
          console.log("0000"+res.data.domain_image);
        }).catch(res => {
          console.log(res)
        });
        this.$Message.success("Success");
      } else {
        this.$Message.error("failed");
      }
    })
  },

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102662.html

相關(guān)文章

  • vue+iview 實(shí)現(xiàn)可編輯表格

    摘要：先簡(jiǎn)單說(shuō)明一下這個(gè)引入的的方式是標(biāo)簽引入的沒(méi)有用到之類(lèi)的構(gòu)建工具畢竟公司還在用這也是我第一次寫(xiě)文章大家看看思路就行了要是有大佬指點(diǎn)指點(diǎn)就更好了話不多說(shuō)先來(lái)個(gè)效果圖我們?cè)倏聪聵O為簡(jiǎn)單的目錄結(jié)構(gòu)實(shí)現(xiàn)的可編輯表格首頁(yè)首頁(yè)相關(guān)與業(yè)務(wù)無(wú)關(guān)的純工具函數(shù) 先簡(jiǎn)單說(shuō)明一下,這個(gè)Demo引入的vue,iview的方式是標(biāo)簽引入的,沒(méi)有用到webpack之類(lèi)的構(gòu)建工具...畢竟公司還在用angularjs...

    Anleb 評(píng)論0 收藏0

  • vue動(dòng)態(tài)生成表單組件vue-form-maker

    摘要：項(xiàng)目地址簡(jiǎn)介動(dòng)態(tài)生成表單組件可以根據(jù)數(shù)據(jù)配置表單使用的庫(kù)是在里一般要用到什么組件或數(shù)據(jù)都得提前聲明所以要根據(jù)數(shù)據(jù)來(lái)生成表單只能使用的函數(shù)要做這一個(gè)組件其實(shí)并不難看一下官方示例再找個(gè)組件庫(kù)差不多就能寫(xiě)出來(lái)如果對(duì)項(xiàng)目有興趣可以或克隆項(xiàng)目自行研究 項(xiàng)目地址 簡(jiǎn)介 Vue動(dòng)態(tài)生成表單組件 可以根據(jù)數(shù)據(jù)配置表單 使用的UI庫(kù)是iView 在Vue里 一般要用到什么組件或數(shù)據(jù) 都得提前聲明所以要根...

    cjie 評(píng)論0 收藏0

  • iView 發(fā)布 3.0 版本，以及開(kāi)發(fā)者社區(qū)等 5 款新產(chǎn)品

    摘要：相對(duì)時(shí)間組件錨點(diǎn)組件面板分割組件分割線組件單元格組件相對(duì)時(shí)間組件用于表示幾分鐘前幾小時(shí)前等相對(duì)于此時(shí)此刻的時(shí)間描述。單元格組件在手機(jī)上比較常見(jiàn)，在上則常用于固定的側(cè)邊菜單項(xiàng)。開(kāi)發(fā)者社區(qū)這是發(fā)布會(huì)最勁爆的一款產(chǎn)品了。 showImg(https://segmentfault.com/img/bVbeuj6?w=2864&h=1458); 7 月 28 日，我們成功地召開(kāi)了 iView 3...

    FreeZinG 評(píng)論0 收藏0

  • iview表單驗(yàn)證的問(wèn)題

    摘要：最近在做項(xiàng)目的時(shí)候，關(guān)于表單驗(yàn)證總會(huì)遇見(jiàn)一些奇奇怪怪的問(wèn)題，下面把表單驗(yàn)證的步驟和表單驗(yàn)證常見(jiàn)的問(wèn)題梳理下，避免以后開(kāi)發(fā)中掉坑。進(jìn)行表單驗(yàn)證時(shí)間日期驗(yàn)證失敗的問(wèn)題我下拉框一樣，日期的類(lèi)型是類(lèi)型，所以需要額外設(shè)置類(lèi)型。 最近在做項(xiàng)目的時(shí)候，關(guān)于表單驗(yàn)證總會(huì)遇見(jiàn)一些奇奇怪怪的問(wèn)題，下面把表單驗(yàn)證的步驟和表單驗(yàn)證常見(jiàn)的問(wèn)題梳理下，避免以后開(kāi)發(fā)中掉坑。 表單驗(yàn)證的步驟 第一步：給Form設(shè)置屬...

    MycLambert 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<