在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 在vue中寫了一個組件，在一個.vue文件中引用了兩次 ，只有第一個起作用是怎么

在vue中寫了一個組件，在一個.vue文件中引用了兩次 ，只有第一個起作用是怎么回事呢？

<template>
<div class="app-container">

<div class="two">    
    <simulative :station='station1' :tmp='tmp1' class="elevator" ></simulative> 
    <simulative :station='station2' :tmp='tmp2' class="elevator" ></simulative> 
</div>

</div>
</template>
// 上面是父組件
// ---------------------------------------------
// 下面是子組件 simulative.vue
<template>
<div class="runBox">

<div class="chart">
  <img style="z-index:100" src="./assets/下.png" alt="" width="250" height="750">
  <img id="cage" style="width:100px;height:150px; z-index:200;left: 80px;" src="./assets/3關(guān).png" alt="">
  <img style="z-index:300" src="./assets/上.png" alt="" width="250" height="750">
</div>

</div>
</template>

<script>
var len = 530 // 電梯可以運行的像素高度
var i = 1
export default {

props: ['station', 'tmp'],
data() {
  return {
    grid: null
  }
},
mounted() {
  // 每一層的高度
  this.grid = 1.0 * len / this.station
  const tmp_px = (this.grid * this.tmp) + 'px'
  console.log(tmp_px)
  document.getElementById('cage').style.bottom = tmp_px
},
watch: {
  tmp: function() {
    const tmp_px = (this.grid * this.tmp) + 'px'
    document.getElementById('cage').style.bottom = tmp_px
    console.log(i++)
  }
}

}
</script>

回答
編輯回答
殘淚

id="cage" 是你這個ID的問題嗎

2017年9月9日 01:09
編輯回答
孤客

提供一個生成 GUID 的方法：

function generateGUID() {
  var s = [];
  var hexDigits = "0123456789abcdef";
  for (var i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "-";

  var guid = s.join("");
  return guid;
}

在 data 里面設(shè)置一個屬性：

cageID: generateGUID()

template:

<img :id="'cage_'+cageID" ...>

document.getElementById('cage_'+this.cageID)

2018年2月26日 12:59