Mod Creation/Reusable Components with PetiteVue: Difference between revisions

Mod Creation/Reusable Components with PetiteVue (view source)

632 bytes added , 17 October 2022

91

edits

@@ Line 358: / Line 358: @@
 // Assume the player changes the input in the UI to "new value"
-console.log(input.value); // -> new value</nowiki>
+console.log(input.value); // -> "new value"</nowiki>
+=== Conditional Rendering ===
+You can conditionally render elements using the <code>v-if</code>, <code>v-else</code>, and <code>v-else-if</code> directives.
+'''Example'''
+ <nowiki><template id="conditional-example">
+  <span v-if="value % 15 === 0">FizzBuzz</span>
+  <span v-else-if="value % 3 === 0">Fizz</span>
+  <span v-else-if="value % 5 === 0">Buzz</span>
+  <span v-else>{{ value }}</span>
+</template></nowiki>
+ <nowiki>function ConditionalExample(props) {
+  return {
+    $template: 'conditional-example',
+    value: props.value
+  };
+}
+ui.create(ConditionalExample({ value: 6 }), host);
+// -> <span>Fizz</span></nowiki>