vueTempNote

Vue Templete Data Binding Test And Note

HTML

<div id="app">
  <div class="circular" :style="{ backgroundImage: 'url(' + image + ')' }">{{imageDesc}}
  </div>
  <div class="circular" :style="backgroundStyle">{{imageDesc}}</div>
  <hr>
  <div>
    <span v-for="value in 10" class="block-span" style="width: {{value + 12}}px; color: #{{666 + 10*value}}; transform: rotate({{ 100 / value }}deg)">{{value}}</span>
  </div>
  <div :style="{'width': `${100 / this.count}%`}, color:'red' ">张良</div>
</div>

CSS

.circular {
  display: inline-block;
  width: 90px;
  height: 90px;
  background-size: cover;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  color: #14c8cc;
  text-align: center;
}
.block-span{
  display: inline-block;
}

JavaScript

var imgUrl = "http://pic5.qqmofasi.com/2016/04/21/1914_LpwbTYYo7CjF7JHoJTkk_square.jpg"

new Vue({
  el: "#app",
  data: {
    imageDesc: '张良',
    image: imgUrl,
    backgroundStyle: {
      backgroundImage: 'url(' + imgUrl + ')',
      fontSize: '1.2em',
      color: '#0ff'
    },
    count: 5
  },
  methods: {
    getRandomNum: function(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      return (Min + Math.round(Rand * Range));
    }
  }
})