vue-basics-js.js

new Vue({
  el: "#app",
  data: {
    name: "Kristine",
    imgWidth: 150,
    imgHeight: 150,
    showImg: true,
    smallImg: true,
    medImg: false,
    lgImg: false,
    igProfileUrl: "https://instagram.com/jordanhudgens",
    squaredResult: 0
  },
  methods: {
    greeting(nameFromView) {
      return `Hi, ${nameFromView}`;
    },
    showImgOptions() {
      if (this.smallImg) {
        this.imgHeight = 250;
        this.imgWidth = 250;
        this.smallImg = false;
        this.medImg = true;
      } else if (this.medImg) {
        this.imgHeight = 350;
        this.imgWidth = 350;
        this.medImg = false;
        this.lgImg = true;
      } else {
        this.imgHeight = 150;
        this.imgWidth = 150;
        this.lgImg = false;
        this.smallImg = true;
      }
    },
    altShowImgOptions() {
      if (this.smallImg) {
        this.smallImg = false;
        this.medImg = true;
      } else if (this.medImg) {
        this.medImg = false;
        this.lgImg = true;
      } else {
        this.lgImg = false;
        this.smallImg = true;
      }
    },
    showIgDetails() {
      console.log("Showing details...");
    },
    square(evt) {
      return (this.squaredResult = evt.target.value * evt.target.value);
    },
    hotKey() {
      console.log("Hot key was pressed");
    }
  }
});

new Vue({
  el: "#logoList",
  data: {
    testing: "heyyyyy",
    logos: [
      { className: "image_logos", imgSource: "images/ds_circle_logo.png" },
      { className: "image_logos", imgSource: "images/ds_square_logo.png" },
      { className: "text_logos", imgSource: "images/ds_icon_text_logo.png" },
      { className: "text_logos", imgSource: "images/ds_text_logo.png" }
    ]
  }
});