• Vue常见指令补充（附加案例）

  ---

  目录

  一、v-for数组或对象中的每一个值

  1.数组

   2.对象

   二、v-bind动态绑定

  1.v-bind指令

   2.v-bind绑定对象

   3.v-bind和v-fo结合（案例）

   4.v-bind动态绑定class数组的用法

   5.v-bind动态绑定class对象的语法

   6.v-bind动态绑定classs数组的语法

  ---

  v-once、v-html、v-text、v-clock 用法见 http://t.csdn.cn/Mtc5r （前一篇文章详解）

  一、v-for数组或对象中的每一个值

  1.数组

  in/of 数组或对象本身

  		
  "app">
  			<h2 v-for="item in todolists">{{item}}h2>
  			<h2 v-for="item of todolists">{{item}}h2>
  		

• <script>
• const vm = new Vue({
• el: '#app',
• data() {
• return {
• todolists: ['篮球', '排球', '羽毛球', '足球'],
• }
• }
• })
• script>

输出结果都是一样的。

​

 2.对象

		
"app">
			<h2 v-for="item in obj">{{item}}h2>
			<h2 v-for="item of obj">{{item}}h2>
		

<script>

const vm = new Vue({

el: '#app',

data() {

return {

obj: {

a: '张三',

b: '李四',

c: '王五'

}

}

}

})

script>

结果也是一样的。

​

 二、v-bind动态绑定

1.v-bind指令

"app">
  <img :src="src" />
  <img :src="url" />

<script>

const vm = new Vue({

el:'#app',

data(){

return {

src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',

url:'img/img.png' //本地图片路劲 没有添加

}

}

})

script>

​

 2.v-bind绑定对象

		
	
	
		<div id="app">
		     <h2 :class="changeActive()" @click="change">{{msg}}h2> //点击事件
		div>