facebook twitter hatena line email

「Javascript/vue/基本」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(foreach)
(foreach)
行61: 行61:
  
 
==foreach==
 
==foreach==
<nowiki>
+
<nowiki>
 
  <ul>
 
  <ul>
 
   <li v-for="user in users">{{user.name}}</li>
 
   <li v-for="user in users">{{user.name}}</li>
行68: 行68:
 
   <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr>
 
   <tr v-for="(user, key) in users"><td>{{key + 1}}</td><td>{{user.name}}</td></tr>
 
  </table>
 
  </table>
   
+
  </nowiki>
 +
 
 
  data: {
 
  data: {
 
   users: [
 
   users: [
行76: 行77:
 
   ]
 
   ]
 
  }
 
  }
</nowiki>
 

2018年4月13日 (金) 18:58時点における版

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

 <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: '三郎'}
  ]
}