VUE-demo01单选和多选 v-bind/v-for

demo01: 实现单选和多选

<!-- 实现单选 -->
<div id="app">
<ul><li v-for='(item, index) in movies' v-on:click = 'getClasses(index)' :class="{checked:index === n}">{{ index }} - {{ item }}</li></ul>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
		   message:'hello vue',
		   movies: ['海王','猎杀时刻','动感时代','龙的传人'],
		   n: 0,
		},
		methods: {
		   getClasses: function(index) {
		     console.log(index);
		     this.n = index
		   }
	    }
    })
    </script>

<!-- 实现多选 -->
<div id="app">
<ul><li v-for='(item, index) in movies' v-on:click = 'getClasses(index)' :class="{checked:index === n}">{{ index }} - {{ item }}</li></ul>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: '#app',
		data: {
		   message:'hello vue',
		   movies: ['海王','猎杀时刻','动感时代','龙的传人'],
		   checkList: [],
		},
		methods: {
		  changeChecked: function(index) {
		  console.log(index)
		  if(this.checkList.includes(index)) {
		     this.checkList = this.checkList.filter(ele => {
			      return ele !== index
			  })
		  }else{
			 this.checkList.push(index)
			}
	      }
	    }
    })
    </script>