「Vue.js」v-showディレクティブのサンプル
環境
Vue2.6.14
書式
<h1 v-show=”要素名”>処理コード</h1>
条件的に要素を表示するための別のオプションは v-show です。 ...
「Vue.js」v-else-ifディレクティブのサンプル
環境
Vue2.6.14
書式
「Vue.js」v-else ディレクティブを使用するサンプル
環境
Vue2.6.14
書式
<div v-if=”条件式”>
処理コード1
</div>
<div v-else> ...
「Vue.js」v-forディレクティブで配列データを画面にリストで表示する
環境
Vue2.6.14
書式
<要素名 v-for=”要素 in コレクション”/>
<div id=”セレクター名”> ...
「Vue.js」templateにv-forディレクティブを使うサンプル
環境
Vue2.6.14
書式
<template v-for=”変数名 in 配列名”>
処理コード
</template>
v-f ...
Windows10にVue CLIで新規プロジェクトを構築する
環境
Windows 10 64bit
(1).nodeバージョンを確認します
C:\>node -v
v14.18.3
(2).npmバージョンを確認します
C:\arkgame ...
Windows10でVue3環境をインストールする
環境情報
Windows10 64 bit
node –version v17.1.0
npm –version 8.1.2
操作方法
1. @vue/cliインスト ...
「Vue.js」ミックスイン(mixins)を定義するサンプル
書式
var ミックスイン名 = { methods: { メソッド名:function(){//処理コード } }使用例
<!DOCTYPE html><html><script sr ...「Vue.js」カスタムディレクティブ(directives)を作成する
書式
directives: {
カスタムディレクティブ名:{
inserted: function(el){
処理コード}
使用例
<!DOCTYPE html>< ...「Vue.js」dataオブジェクトのプロパティ名でhref属性を設定する
書式
v-bind:href=”プロパティ名”
使用例
「Vue.js」コンポーネントのテンプレートを指定する
書式
Vue.component(コンポーネント名,
{ template : ‘xxx’}
)
使用例
「Vue.js」dataオブジェクトに複数の値を設定する
書式
new Vue({ data: {名前1: 値1, 名前2: 値2, 名前3: 値3 }})使用使用例
<!DOCTYPE html><html><script src=""> ...「Vue.js」Vueのelとdataオブジェクトのサンプル
書式
new Vue({
el:’要素セレクタ’,
data: {データ名前:値}
}
使用例
「Vue.js」コンポーネントがミックスインを使用するサンプル
基本
コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。
使用例
<!DOCTYPE html><html> ...「Vue.js」ミックスイン (mixin) のサンプル
説明
ミックスイン (mixin) は、Vue コンポーネントに再利用可能で柔軟性のある機能を持たせるための方法です。
ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。
使用例 ...
[Vue3]v-showディレクティブの使い方
書式
<h1 v-show=”xxx”>要素</h1>
使用例
「Vue3」v-else-ifディレクティブの使い方
書式
<div v-else-if=”条件”>要素</div>
使用例
「Vue3」v-elseディレクティブを使用するサンプル
書式
<div v-else> xxx</div>
使用例