Bagaimana untuk menghantar nilai boolean secara langsung dalam vue

Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden yang interaktif. Vue mudah dipelajari, cekap dan fleksibel, membolehkan pembangun membina aplikasi satu halaman berprestasi tinggi dengan cepat. Artikel ini akan memperkenalkan cara Vue menghantar nilai boolean secara langsung.

Dalam komponen Vue, kami boleh menerima data yang dihantar melalui atribut props komponen tersebut. Dalam komponen induk, kita boleh menghantar data kepada komponen anak melalui arahan v-bind. Biasanya, cara kami menghantar nilai jenis Boolean kepada subkomponen adalah seperti berikut:

<template>
  <div>
    <child-component :is-true="true"></child-component>
  </div>
</template>

Arahan v-bind digunakan di sini untuk menghantar nilai kepada subkomponen, dan subkomponen boleh menghantar props nilai ini:

Vue.component('child-component', {
  props: ['isTrue'],
  template: '<div>{{ isTrue }}</div>'
});

Dalam contoh ini, kami secara eksplisit menghantar nilai Boolean kepada subkomponen dan subkomponen boleh melakukan pemprosesan yang sepadan berdasarkan nilai ini.

Walau bagaimanapun, dalam beberapa kes, kami mungkin mahu menghantar ungkapan terus kepada komponen anak, dan hasil ungkapan ini ialah nilai Boolean. Contohnya:

<template>
  <div>
    <child-component :is-true="foo === &#39;bar&#39;"></child-component>
  </div>
</template>

Dalam contoh ini, kami berharap dapat menentukan sama ada nilai pembolehubah foo adalah sama dengan 'bar', dan jika ya, hantarkan benar kepada komponen anak. Walau bagaimanapun, dalam Vue, cara penulisan ini tidak disokong. Jika ditulis seperti di atas, komponen anak akan menerima rentetan 'foo === 'bar' dan bukannya nilai boolean.

Salah satu cara untuk menyelesaikan masalah ini ialah menggunakan sifat terkira dalam komponen induk:

<template>
  <div>
    <child-component :is-true="isFooBar"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: 'bar'
    };
  },
  computed: {
    isFooBar() {
      return this.foo === 'bar';
    }
  }
};
</script>

Dalam contoh ini, kami mentakrifkan sifat terkira isFooBar yang bergantung pada foo Nilai digunakan untuk menentukan sama ada ia sama dengan 'bar' Jika ya, ia mengembalikan benar, jika tidak ia mengembalikan palsu. Kemudian, kami menghantar harta yang dikira ini kepada komponen anak dalam templat dan komponen anak boleh menerima nilai Boolean.

Walaupun pendekatan ini boleh menyelesaikan masalah, ia menambahkan kod tambahan dan mungkin bukan penyelesaian yang paling mudah. Nasib baik, Vue menyediakan cara yang lebih mudah untuk menghantar nilai boolean secara langsung. Kami hanya perlu menambah operator unary + sebelum ungkapan Boolean untuk memaksanya menjadi nilai Boolean:

<template>
  <div>
    <child-component :is-true="+foo === +bar"></child-component>
  </div>
</template>

Dalam contoh ini, kami menggunakan operator unary + untuk menukar foo dan bar dibuang ke angka taip sebelum perbandingan. Hasil perbandingan ialah nilai Boolean, yang boleh dihantar terus kepada subkomponen dan subkomponen boleh menerima nilai Boolean.

Untuk meringkaskan, nilai Boolean ​​boleh dihantar terus dalam Vue, tetapi perlu diingat bahawa jika kita menghantar ungkapan, kita perlu menggunakan operator unary + untuk memaksanya kepada nilai Boolean. Dengan cara ini, kami boleh mengendalikan data jenis Boolean dengan lebih mudah dalam Vue.

Atas ialah kandungan terperinci Bagaimana untuk menghantar nilai boolean secara langsung dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!