vueTempDataBindText

Test how vue template bind data

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
<div id="app">
  <p><strong>Class</strong></p>
  <div v-for="value in 10" class="{{ isLessThanRandom($index) ? 'colorRed' : 'colorGreen'}}" @click='onTestClick(value)'>{{$index}}</div>
	<br>
  <div v-for="value in 10" class="{{ this.isLessThanRandom($index) ? 'colorRed' : 'colorGreen'}}" @click='onTestClick(value)'>{{$index}}</div>
	<br>
	<div :class="{'colorGrey': isNeedFlag}">analysis class bind (1)</div>
	<div :class="{colorGrey: !isNeedFlag}">analysis class bind (2)</div>
	
	<hr>
	<p><strong>Input</strong></p>
	<p>input content： <span style='color:#999'>{{testInput}}</span></p>
	<input type="text" value="{{ testInput }}">
	<input type="text" v-model="testInput">
	<a href="javascript:;" @click='onClearInputClick'>Clear Input</a>
	
  <hr>
	<p><strong>v-if</strong></p>
  <div class='colorPurple' v-if='isShowMoudleFlag'> Show </div>
  <div class='colorPurple' v-if='!isShowMoudle(20)'> Show </div>
  <div class='colorPurple' v-if='isShowMoudle(30)'> Show Also</div>
	<div class='colorPurple' v-if='{{isShowMoudleFlag}}'> Can`t Show(x)</div>
  <blockquote class='jade-blockquote'>
    <strong>注:</strong> v-if,之后可以跟：1. 变量String；2. 函数调用; 3. 表达式;(当然；函数名同变量名不能重) Niubility.Nice</blockquote>
</div>

CSS

.colorRed,
.colorGreen {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  text-align: center;
  line-height: 30px;
}

.colorRed {
  background-color: #f22;
}

.colorGreen {
  background-color: #2f2;
  pointer-events: none;
}

.colorPurple {
  background-color: purple;
  border: 1px solid #fe0;
  width: 300px;
  height: 30px;
}

.colorGrey{
	background-color: #ccc;
	color: #666;
	margin-top: 5px;
}
.jade-blockquote {
  margin: 3px;
  padding: 9px 0;
  border-left: 3px solid #000;
  background-color: #666;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    isShowMoudleFlag: true,
		isNeedFlag: true,
		testInput: 'default text'
  },
	watch: {
		'textInput': function(newVal, oldVal){
			console.log(newVal)
		}
	},
  methods: {
    isLessThanRandom: function(index) {
      var randomNum = this.getRandomNum(1, 10)
      if (index <= randomNum) {
        return true
      } else {
        return false
      }
    },
    getRandomNum: function(Min, Max) {
      var Range = Max - Min;
      var Rand = Math.random();
      return (Min + Math.round(Rand * Range));
    },
    isShowMoudle: function(num) {
      return num >= 30
    },
		
		<!-- on-click-event -->
		onTestClick: function(index) {
      alert(index)
    },
		onClearInputClick: function(){
			this.testInput = ''
		}
  }
})