「Vue3」template要素でv-ifを使うサンプル
書式
<template v-if=”条件式”>
要素
</template>
使用例
「Vue3」v-if ディレクティブのサンプル
書式
<p v-if =条件
v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。
サンプルコード
CentOS8.3にVue.jsをインストールする方法
操作方法
1.nodejsの確認
# node –version
v10.24.0
# npm –version
6.14.11
2.@vue/cliイン ...
[Vue.js]v-forディレクティブで配列要素を取得するサンプル
構文
<li v-for=”item in 配列名” :key=”item.key”>
htmlコード
「Vue.js」v-showディレクティブで条件的に要素を表示するサンプル
構文
<div v-show=”条件式” ></div>
使用例
「Vue.js」v-else-ifディレクティブを使うサンプル
構文
<div v-else-if=”条件式”>
some code
</div>
使用例
「Vue.js」テンプレート(template)にv-ifディレクティブを使うサンプル
構文
<template v-if=”条件式”>
//some code
</template>
使用例
<div id="app"> ...「Vue.js」v-showディレクティブを使うサンプル
構文
<div v-show=”参照値”>this is a demo</div>
使用例
「Vue.js」v-elseディレクティブを使うサンプル
構文
<div v-if=”条件式”>aa</div>
<div v-else> bb</div>
使用例
「Vue.js」v-ifディレクティブを使うサンプル
構文
<div v-if=”条件式”>xxxx</div>
説明
条件式「cft」の値がtrueの場合、DOM要素が生成、falseの場合破棄
使用例 ...
「Vue.js」v-forディレクティブのサンプル
構文
v-for=”要素名 in 配列”
使用例
「Vue.js入門」v-textでテキスト文字列を出力するサンプル
説明
DOM要素の内側をテキストノードとしてすべて書き換えます。
使用例
「Vue.js入門」v-htmlコマンドでhtmlコードを出力するサンプル
説明
DOM要素の内側をinnerHTMLとして書き換えます。
使用例
「Vue.js入門」v-bindディレクティブでhtmlプログラムの値を判定するサンプル
構文
v-bind:class=”{‘CSS名A’: use}
useがtrueの場合、CSS名Ａを呼び出す
使用例
CSSコード
<style> ...「Vue.js」v-for文でループを利用する方法
構文
<ul id="example"> <li v-for="(item, index) in items"> {{parentMessage}} - {{index}} - {{item.messag ...「Vue.js」v-forディレクティブの使い方
環境
vue2.6.14
v-forの書式
<div v-for=”(item, index) in items”></div>
配列、オブジェクトの ...
「Vue.js」v-on:dragoverでdragoverイベントを取得
環境
Windows10 home 64bit
Vue.js 3.2.2
Google Chrome 99.0.4844.51
書式
<div @dragover=イベント名>me ...「Vue.js」v-on:click.onceで1度だけ実行されるクリックイベントサンプル
環境
Windows10 home 64bit
Vue.js 3.0.0
Google Chrome 98.0.4758.102
書式
<button id=”btnReg ...