Vue.js

単一選択のセレクトボックスにて双方向データバインド

当店のご利用頻度は？:{{message}}

HTML <div id="app">
<p>当店のご利用頻度は？:{{message}}</p>
<select v-model="message">
<option disabled value="">選択してください</option>
<option value="初めて">初めて</option>
<option value="週1回以上">週1回以上</option>
<option value="月2回以上">月2回以上</option>
<option value="半年に1回">半年に1回</option>
</select>
</div>

CSS .red {
color: red;
}

JavaScript var app = new Vue({
el:'#app',
data: {
message: ' '
}
});

複数選択のセレクトボックスにて双方向データバインド

分類：{{seletedCategory}}

HTML <div id="app2">
<p class="red">分類：{{seletedCategory}}</p>
<select v-model="category" multiple>
<option value="宿泊費">宿泊費</option>
<option value="食費">食費</option>
<option value="交通費">交通費</option>
</select>
</div>

multiple属性をつけると複数選択が可能になります。| If you add the multiple attribute, you can select multiple items.

複数選択するにはshiftキーを押したまま選択肢をクリック | To select multiple items, hold down the shift key and click the option.

CSS .red {
color: red;
}

JavaScript var app2 = new Vue({
el:'#app2',
data: {
category:[]
},
computed: {
seletedCategory: function(){
// 1件以上選択されている場合、選択された値を連結した文字列を返す
return this.category.length >=1 ? this.category.join() : '';
}
}
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

キャリアアップに必要なスキルを取得しよう。| Get the skills you need to advance your career.

オンラインで受講ができるスクールですので、全国どこからでも。 | Since it is a school where you can take classes online, you can take it from anywhere in the country.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー