More than 3 years have passed since last update.

vue.js

Posted at 2021-10-18

ほぼ備忘録のように書いていいます。

v-for

<ul>
	<li v-for=“item in items” :key=“item.message”>{{ item.message }}</li>
</ul>

itemsの中身を順番にitemの変数に格納する。

v-for=”変数 in オブジェクト”

<div v-if="type === 'A'">
  A
</div> <div v-else>
  Not A/B/C
</div>

“type === ‘A’”を評価し、 正の場合v-ifのブロックの内容を表示
負の場合v-elseのブロックを表示

v-if=“変数・式”

<div id="app">
  <button v-on:click="onClick">ボタン</button>
</div>

イベントをトリガーにしてメソッドや指揮を実行する

v-on:イベント名="メソッド名または式"

<input v-model="message”>
<p>Message is: {{ message }}</p>

input要素に入った内容を定義した変数に入れ表示させる

v-model=“変数”

<template>
  <input v-bind="{ type:'text', maxlength: 3 }">
</template>

 <input type="text" maxlength="3">

要素に対してプロパティを適用します。