facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(クラス変更)
(クラス変更)
行117: 行117:
 
  data: {
 
  data: {
 
   classcolor:"redbold"
 
   classcolor:"redbold"
 +
}
 +
 +
==スタイル直接指定==
 +
<nowiki>
 +
<p v-bind:style="style1">スタイル</p></nowiki>
 +
 +
data: {
 +
  style1: {
 +
    "color": "red",
 +
    "fontSize": "20px"
 +
  }
 
  }
 
  }

2018年4月16日 (月) 14:34時点における版

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"
  }
}