Jassif Team Institution

Vue ভি-শো অ্যালগরিদম

ভি-শো দিয়ে কীভাবে একটি উপাদানকে দৃশ্যমান বা অদৃশ্য করা যায় তা শিখুন।

v-show ব্যবহার করা সহজ কারণ কন্ডিশনটি HTML ট্যাগ অ্যাট্রিবিউটে লেখা আছে।

শর্তসাপেক্ষ চেহারা

v-শো পদ্ধতি একটি উপাদান লুকিয়ে রাখে যখন শর্তটি 'মিথ্যা' হয় তখন CSS 'ডিসপ্লে' প্রপার্টির মান 'কেউ নয়' সেট করে।

HTML অ্যাট্রিবিউট হিসেবে v-show লেখার পরে, ট্যাগটি দৃশ্যমান কিনা তা নির্ধারণ করতে আপনাকে একটি শর্ত পাস করতে হবে।

<div v-show="showDiv">This div tag can be hidden</div>

উপরের কোডে, 'showDiv' একটি বুলিয়ান Vue ডেটা অ্যাট্রিবিউটকে উপস্থাপন করে যার একটি অ্যাট্রিবিউট মান 'সত্য' বা 'ফলস'। 'showDiv' 'সত্য' হলে div ট্যাগ দেখানো হবে, 'false' হলে ট্যাগটি দেখানো হবে না।

<div id="app">
  <div v-show="showDiv">This div tag can be hidden</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>

v-show vs. v-if

v-show এবং v-if এর মধ্যে পার্থক্য হল যে v-if কন্ডিশনের উপর নির্ভর করে এলিমেন্ট তৈরি করে (রেন্ডার করে), কিন্তু v-show এর সাথে উপাদানটি ইতিমধ্যেই তৈরি হয়ে গেছে, v-show শুধুমাত্র তার চেহারা পরিবর্তন করে।

অতএব, একটি বস্তুর চেহারা পরিবর্তন করার সময় ভি-শো ব্যবহার করা ভাল, কারণ ব্রাউজারের পক্ষে এটি করা সহজ এবং এটি দ্রুত প্রতিক্রিয়া এবং একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে।

ভি-শোতে v-if ব্যবহার করার একটি কারণ হল v-if ব্যবহার করা যেতে পারে v-else-if এবং v-else এর সাথে।

নিচের উদাহরণে v-show এবং v-if দুটি ভিন্ন <div> উপাদানে আলাদাভাবে ব্যবহার করা হয়েছে, কিন্তু একই Vue বৈশিষ্ট্যের উপর ভিত্তি করে। আপনি উদাহরণটি খুলতে পারেন এবং কোডটি পরীক্ষা করে দেখতে পারেন যে v-শোতে <div> উপাদান রয়েছে, এবং CSS ডিসপ্লে বৈশিষ্ট্যকে 'কোনটি নয়'-তে সেট করে, কিন্তু v-যদি আসলে <div> উপাদানটি ধ্বংস করে।

<div id="app">
  <div v-show="showDiv">Div tag with v-show</div>
  <div v-if="showDiv">Div tag with v-if</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        showDiv: true
      }
    }
  })
  app.mount('#app')
</script>

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

<div id="app">
  <div id="lightDiv">
    <div ="lightOn"></div>
    <img src="img_lightBulb.svg">
  </div>
  <button v-on:click=" lightOn =! lightOn ">Switch light</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lightOn: false
      }
    }
  })
  app.mount('#app')
</script>