抵抗分圧計算機

index.html

<style>
table,
td {
  border: 1px solid #333;
  border-collapse: collapse;
  border-spacing: 0;
}

thead,
tfoot,th {
  border: 1px solid #ccc;
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #333;
  color: #fff;
}

</style>
<div id="app">
  <table>
    <thead>
      <th>R1</th>
      <th>R2</th>
      <th>R2/(R1+R2)</th>
    </thead>
    <tbody>
      <tr v-for="x in combination">
        <td>{{x[0]}}</td>
        <td>{{x[1]}}</td>
        <td>{{x[2]}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue

const resistors_base_all = [
  [10,22,47],
  [10,15,22,33,47,68],
  [10,12,15,18,22,27,33,39,47,56,68,82],
  [10,11,12,13,15,16,18,20,22,24,27,30,
  33,36,39,43,47,51,56,62,68,75,82,91]
  ]
const resistor_base = [10,11,12,13,15,16,18,20,22,24,27,30,33,36,39,43,47,51,56,62,68,75,82,91]


createApp({
  setup() {
    const multiply = [0,1]
    const resistors = resistor_base.map(a => multiply.map(mul => a*Math.pow(10,mul))).flat()
    const combination = resistors.map(a => resistors.map(b => {
      let x = b/(a+b)
      return [a,b,x]
      //const log10 = Math.ceil(Math.log10(x)+1)-1
      //const _a = a * Math.pow(10,log10)
      //const _x = b/(_a+b)
      //return [_a,b,_x]
    })).flat().sort((a,b) => a[2]>b[2])
                    
    const message = ref('Hello Vue!')
    return {
      combination
    }
  }
}).mount('#app')
</script>