Условная визуализация Vue.js

Опубликовано: 30 Марта, 2022

Vue.js - это прогрессивный фреймворк для создания пользовательских интерфейсов. Основная библиотека ориентирована только на уровень представления, ее легко подобрать и интегрировать с другими библиотеками. Vue также отлично поддерживает сложные одностраничные приложения в сочетании с современными инструментами и вспомогательными библиотеками.

Условный рендеринг в Vue позволяет легко переключать присутствие любого элемента в DOM на основе определенного условия. Для этого используются директивы v-if и v-else .

Директива v-if может использоваться для условного рендеринга блока. Ему может быть назначена логическая переменная, и в зависимости от значения она переключает базовый элемент DOM. Директива v-else может использоваться для рендеринга блока, который не удовлетворяет условию директивы v-if. Эта директива должна немедленно следовать за директивой v-if, чтобы она работала. Директива v-else-if также может использоваться для объединения нескольких условных выражений.

В следующих примерах демонстрируется условный рендеринг в Vue.js:

Пример 1: В этом примере текст, указанный в директиве v-if, будет показан, если переменная isVisible имеет значение true.

Filename: index.html

HTML

<html>
<head>
  <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
  </script>
</head>
<body>
  <div id="parent">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <strong v-if="isVisible">
      This text is visible!
    </strong>
  </div>
  <script src="app.js"></script>
</body>
</html>

Filename: app.js

Javascript

const parent = new Vue({
  el : "#parent",
  data : 
    
    // Data is interpolated
    // in the DOM
    isVisible: false
  }
})

Выход:

Пример 2:

Filename: index.html

HTML

<html>
<head>
  <script src=
"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
  </script>
</head>
<body>
  <div id="parent">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <h3>Data Structure Course</h3>
    <p v-if="gfg">
      GeeksforGeeks Self paced Data Structure
      course is Awesome!
    </p>
  
    <p v-else>
      Not GeeksforGeeks course!
    </p>
  
  </div>
  <script src="app.js"></script>
</body>
</html>

Filename: app.js

Javascript

const parent = new Vue({
  el : "#parent",
  data : {
    
    // Data is interpolated
    // in the DOM
    gfg: true
  }
})

Выход:

Когда для переменной gfg установлено значение true

Когда для переменной gfg установлено значение false

JavaScript

Условная визуализация Vue.js

HTML

Javascript

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ