Javascript/vue/基本
提供: 初心者エンジニアの簡易メモ
目次
vue.js基本的な記述方法
以下記述でid内のdivにだけ適用できる。
new Vue({ el: '#column1', data: { text1: 'ぴよぴよ', text2: 'ぴよぴよ' } });
テキスト出力
<div id="column1"> {{text1}} </div>
inputボックス出力
<input v-model="text1" />
入力したものが他の{{text1}}などに適用される
inputボックスに数字を出力
<input v-model="num1" type="number" />
up・downボタン付きで入力欄が表示される
ボタン処理
<button v-on:click="click1">登録</button> {{text1}} → {{text2}}
new Vue({ el: '#column1', data: { text1: 'ぴよぴよ1', text2: 'ぴよぴよ2' }, methods: { click1: function () { 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でも同様
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" }
スタイル直接指定
<p v-bind:style="style1">スタイル</p>
data: { style1: { "color": "red", "fontSize": "20px" } }