「Javascript/vue/基本」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→javascriptを動作させる) |
(→javascriptを動作させる) |
||
行183: | 行183: | ||
<pre> | <pre> | ||
{{ 1 + 1 }} | {{ 1 + 1 }} | ||
− | |||
</pre> | </pre> | ||
+ | カッコ内はjavascriptが動作する |
2019年3月8日 (金) 00:20時点における版
目次
vue.js基本的な記述方法
以下記述でid内のdivにだけ適用できる。
new Vue({ el: '#column1', data: { text1: 'ぴよぴよ', text2: 'ぴよぴよ' } });
テキスト出力
<div id="column1"> {{text1}} </div>
テキストif出力
<div v-if="text1"> {{text1}} </div> <div v-else>no data</div>
inputボックス出力
<input v-model="text1" />
入力したものが他の{{text1}}などに適用される
inputボックスに数字を出力
<input v-model="num1" type="number" />
up・downボタン付きで入力欄が表示される
ボタン処理
<button v-on:click="click1">登録</button> <button @click="click1">登録</button> @clickでもよい {{text1}} → {{text2}}
new Vue({ el: '#column1', data: { text1: 'ぴよぴよ1', text2: 'ぴよぴよ2' }, methods: { click1: function() { // click1() { でもよい this.text2 = this.text1; } } });
htmlを適用する
<div v-html="html1"></div>
checkboxで表示非表示
<input type="checkbox" v-model="checked1" /> <p v-show="checked1">ぴよぴよ1</p>
data: { checked1: true }
v-ifでも同様
複数checkboxの扱い方
<input type="checkbox" id="hoge1" value="hoge1" v-model="checkedNames"> <label for="hoge1">hoge1</label> <input type="checkbox" id="hoge2" value="hoge2" v-model="checkedNames"> <label for="hoge2">hoge2</label> <input type="checkbox" id="hoge3" value="hoge3" v-model="checkedNames"> <label for="hoge3">hoge3</label>
data: { checkedNames: [] }
tableでcheckboxを使う場合
<tr v-for="user in users" > <td><input type="checkbox" v-model="checkedNames[user.id]" :id="user.id" value="true"></td> </tr>
data: { checkedNames: [] }
foreach
<ul> <li v-for="user in users">{{user.name}}</li> </ul> <table border="1"> <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr> </table>
data: { users: [ { name: '太郎'}, { name: '次郎'}, { name: '三郎'} ] }
文字サイズ変更
<input type="radio" name="fontSize" value="10px" v-model="fontSize1">10px <input type="radio" name="fontSize" value="20px" v-model="fontSize1">20px <p v-bind:style="{fontSize: fontSize1}">ほげほげ</p>
data: { fontSize1: '20px' }
色変更
<input type="radio" name="color" value="red" v-model="color1">red <input type="radio" name="color" value="green" v-model="color1">green <p v-bind:style="{color: color1}">ほげほげ</p> <p v-bind:style="{backgroundColor: color1}">背景色変更</p>
data: { color1: 'green' }
クラス名変数指定
<style> .redbold { color: #f00; font-weight: bold; } </style> <p v-bind:class="classcolor">クラス変更</p>
data: { classcolor:"redbold" }
v-bind:class は :class でもよい
スタイル変数指定
<p v-bind:style="style1">スタイル</p>
data: { style1: { "color": "red", "fontSize": "20px" } }
v-bind:style は :style でもよい
URL変数指定
<a v-bind:href="url">ほげほげ</a>
data: { url: "ttp://yahoo.co.jp" }
v-bind:href は :href でもよい
ボタン無効化
<button v-bind:disabled="isDisabled">Button</button>
0では無効化できない。false,unsigned,nullだと無効化できる
デバッグ
console.log('hoge');
ブラウザの開発ツールのコンソールに表示される
javascriptを動作させる
{{ 1 + 1 }}
カッコ内はjavascriptが動作する