Vue.js
सशर्त प्रतिपादन

वाक्य - विन्यास

• <element v-if="condition"></element> // v-if
• <element v-if="condition"></element><element v-else="condition"></element> // v-if | v-बाकी
• <template v-if="condition">...</template> // templated v-if
• <element v-show="condition"></element> // वी-शो

टिप्पणियों

अवलोकन

Vue.js में, टेम्पलेट में तत्वों पर निर्देशों के एक सेट का उपयोग करके सशर्त प्रतिपादन प्राप्त किया जाता है।

v-if

स्थिति सामान्य होने पर तत्व सामान्य रूप से प्रदर्शित होता true । जब स्थिति false होती है, तो केवल आंशिक संकलन होता है और जब तक स्थिति true हो जाती तब तक तत्व DOM में प्रस्तुत नहीं किया जाता true ।

v-else

एक शर्त को स्वीकार नहीं करता है, बल्कि पिछले तत्व के v-if स्थिति false तत्व का false । केवल v-if निर्देश के साथ एक तत्व के बाद इस्तेमाल किया जा सकता है।

v-show

v-if समान है, हालांकि, तत्व हमेशा DOM में प्रदान किया जाएगा, भले ही स्थिति false । यदि स्थिति false , तो यह निर्देश केवल तत्व की display शैली को none लिए सेट none ।

v-if / v- और

यह मानते हुए कि हमारे पास Vue.js उदाहरण है:

var vm = new Vue({
    el: '#example',
    data: {
        a: true,
        b: false
    }
});

आप सशर्त रूप से v-if निर्देश को शामिल करके किसी भी html तत्व को प्रस्तुत कर सकते हैं; वह तत्व जिसमें v-if होता है, केवल तभी प्रस्तुत होता है जब स्थिति सत्य का मूल्यांकन करती है:

<!-- will render 'The condition is true' into the DOM -->
<div id="example">
    <h1 v-if="a">The condition is true</h1>
</div>

<h1> तत्व इस मामले में प्रस्तुत करेगा, क्योंकि चर 'a' सत्य है। v-अगर किसी बूलियन का मूल्यांकन करने वाले किसी भी अभिव्यक्ति, गणना की गई संपत्ति, या फ़ंक्शन के साथ उपयोग किया जा सकता है:

<div v-if="0 === 1">                  false; won't render</div>
<div v-if="typeof(5) === 'number'">   true; will render</div>

आप एक ही स्थिति के लिए कई तत्वों को एक साथ समूहित करने के लिए template तत्व का उपयोग कर सकते हैं:

<!-- in this case, nothing will be rendered except for the containing 'div' -->
<div id="example">
    <template v-if="b">
        <h1>Heading</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>
</div>

v-if का उपयोग करते v-if , आपके पास v-else निर्देश के साथ एक काउंटर स्थिति को एकीकृत करने का विकल्प भी होता है। तत्व के अंदर निहित सामग्री को केवल तभी प्रदर्शित किया जाएगा जब पिछले v- अगर की स्थिति झूठी थी। ध्यान दें कि इसका मतलब है कि v-if वाला तत्व v-if वाले तत्व के तुरंत बाद दिखाई देगा।

<!-- will render only 'ELSE' -->
<div id="example">
    <h1 v-if="b">IF</h1>
    <h1 v-else="a">ELSE</h1>
</div>

जैसा कि v-if के साथ होता है, तो v- अन्य के साथ आप एक <template> भीतर कई HTML तत्वों को एक साथ समूहित कर सकते हैं:

<div v-if="'a' === 'b'"> This will never be rendered. </div>
<template v-else>
    <ul>
      <li> You can also use templates with v-else. </li>
      <li> All of the content within the template </li>
      <li> will be rendered. </li>
    </ul>
</template>

वी शो

के उपयोग के v-show निर्देश की है कि लगभग समान है v-if । केवल अंतर यह है कि v-show <template> सिंटैक्स का समर्थन नहीं करता है , और कोई "वैकल्पिक" स्थिति नहीं है।

var vm = new Vue({
    el: '#example',
    data: {
        a: true
    }
});

मूल उपयोग इस प्रकार है ...

<!-- will render 'Condition met' -->
<div id="example">
    <h1 v-show="a">Condition met</h1>
</div>

जबकि v-show "वैकल्पिक" स्थितियों को परिभाषित करने के लिए v-else निर्देश का समर्थन नहीं करता है, यह पिछले ...

<!-- will render 'This is shown' -->
<div id="example">
    <h1 v-show="!a">This is hidden</h1>
    <h1 v-show="a">This is shown</h1>
</div>