Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(39)画像の配置や背景をスライドバーで簡単に調整する

40. 画像の配置や背景をスライドバーで簡単に調整する

  • Vue.jsバージョン: 2.5.2

  • 画面をリロードすると最初に戻ります。

サンプルコード

ポイント

inputに割り当てた変数からtransformの書式を作るだけでできます。

  const vm = new Vue({
    el: "#app",
    data: {s: 1.0, x: 0, y: 0, a: 0, c: "#ADFF2F", b: 64},
    computed: {
      transform: function() { return `scale(${this.s}) translate(${this.x}px, ${this.y}px) rotate(${this.a}deg)` },
    },
  })

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。