「Javascript/vue/基本」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→inputボックスに数字を出力) |
|||
| 行46: | 行46: | ||
}); | }); | ||
</pre> | </pre> | ||
| + | |||
| + | ==htmlを適用する== | ||
| + | <div v-html="html1"></div> | ||
| + | |||
| + | ==チェックボックスで表示非表示== | ||
| + | <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: '三郎'} | ||
| + | ] | ||
| + | } | ||
2018年4月13日 (金) 18:57時点における版
目次
vue.js記述
以下記述でid内のdivにだけ適用できる。
new Vue({
el: '#column1',
data: {
text1: 'ぴよぴよ',
text2: 'ぴよぴよ'
}
});
テキスト出力
{{text1}}
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: {
output: function (){
this.text2 = this.text1;
}
}
});
htmlを適用する
チェックボックスで表示非表示
<input type="checkbox" v-model="checked1" />
ぴよぴよ1
data: {
checked1: true
}
v-ifでも同様
foreach
| テンプレート:Key + 1 | テンプレート:User.name |
data: {
users: [
{ name: '太郎'},
{ name: '次郎'},
{ name: '三郎'}
]
}
