Q&A
これから始めるVue.js実践入門という参考書で以下のコードがあるのですが、heightの値をwidthと異なる値(50など)にする場合はどのように処理すれば良いのでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8" /> 5<title>Vue.js</title> 6</head> 7<body> 8<div id="app"> 9 <select v-model="attr"> 10 <option value="height">高さ</opton> 11 <option value="width">幅</opton> 12 </select>： 13 <input type="text" size="5" v-model="size" /><br /> 14 <img src="https://wings.msn.to/image/wings.jpg" v-bind:[attr]="size" /> 15</div> 16<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 17<script src="js/bind_dynamic.js"></script> 18</body> 19</html>
Vue
1new Vue({ 2 el: '#app', 3 data: { 4 attr: 'width', 5 size: 100 6 }, 7});
回答1件
0
ベストアンサー
widthとheightの値を別々で設定したいのであれば、下記のようなやり方はどうでしょうか？
html
1 <select v-model="attr"> 2 <option value="height">高さ</opton> 3 <option value="width">幅</opton> 4 </select>： 5 <input type="text" size="5" v-model="size[attr]" /><br /> 6 <img src="https://wings.msn.to/image/wings.jpg" :width="size.width" :height="size.height" />
vue
1 data: { 2 attr: 'width', 3 size: { 4 width: 100, 5 height: 100, 6 } 7 },
このようにすることで、幅を選択されているときは、widthのsizeを変更して、
高さを選択しているときは、heightのsizeを変更できます。
投稿2020/10/13 13:45
総合スコア117
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/25 11:00