<div id="app">
  <div class="box1" :style="{background: `linear-gradient(${value},orange,yellowgreen)`}"></div>
  <select v-model="value">
    <option :value="item" v-for="(item,index) in list">{{item}}</option>
  </select>
</div>
.box1{
  width:100px;
  height:100px;
  background:linear-gradient(55deg,orange,yellowgreen);
}
View Compiled
new Vue({
  el:"#app",
  data(){
    return {
      list:[
        "0deg",
        "to top",
        "90deg",
        "to right",
        "180deg",
        "to bottom",
        "-90deg",
        "to left"
      ],
      value:"0deg"
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js