SOURCE

Vue.component('todo-item',{
	props: ['todo'],
	template:'<li>{{todo}}<li>'

})






var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    title:'测试指令 v-bind '+new Date(),
    iftrue:true,
    iffalse:false,
    todos:['列表1'],
    inputValue:'',
    ifBackground:false,
    checked:true,
    checkedNames: [],
    selected:''
    },
    methods:{
    
    	btnClick:function(){
      	
        this.iffalse =  !this.iffalse;

      },
      addValue:function(){
      	
        if(this.inputValue == ""){
        
        alert("填写内容")
        
        return false;
        
        }else{

           this.todos.push(this.inputValue);
           
           this.inputValue = "";

        }

      },
      bacBtn:function(){

       	  this.ifBackground = !this.ifBackground;
        	
      },
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        
        	console.log(event)
        
        
      }
    
    },
    
    
  })

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-once>{{ message }}</p>
  
  <h2 v-bind:title="title">指令 v-bind</h2>
  
  <ul>
    <li v-if="iftrue">v-if  true</li>
    <li v-if="iffalse">v-if  false</li>
     <li v-else>v-else  false</li>
  </ul>
  
  
  <button @click="btnClick">点击</button>
  <br>
  <br>
  
  <input type="text" v-model="inputValue">      <button @click="addValue">Add</button>
  <ul>
    <li v-for="todo in todos">
      {{todo}}
    </li>
  </ul>
  
  
  <br><br> <br>
  
  <ul>
  <todo-item v-for="todo in todos" v-bind:todo="todo" class="a1" :class="{todoColor:ifBackground}"></todo-item>
  </ul>
  <br><br><br>
  
  <div class="div1" :class="{div1Background:ifBackground}"></div>
  <button @click.enter="bacBtn">点击切换背景</button>
  
  <br><br><br>
  
  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
  
  <br /><br /><br />
  
  <input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
  
  <br /><br /><br />
  
  <div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
  
  <br /><br /><br />
  <div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="aaaa">A</option>
    <option value="bbb">B</option>
    <option value="ccc">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
</div>

.div1{
  width:100px;
  height:22px;
  border-radius:3px;
  border:1px solid #000;
  float:left;
}

.div1Background{
  background:red;
}
.todoColor{
  color:red
}