v-bind 绑定属性语法

---

前言

学习v-bind 绑定对象的相关语法

---

一.v-bind语法

1.绑定id 和src 属性

  <div id="app">
     <img v-bind:src="src"/>
     <input type='text' v-bind:id='id' />
  </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script type='text/javascript'>
   var vm = new Vue({
      el:"#app",
      data:{
        src:"../image/logo.png",
        id:"name"
      },
      methods:{
      }
   });
 </script>

2 .绑定class对象语法

1.语法一

  <div id="app">
     <p :class="{active:a,left:b}">世界那么大，我总出去看一看</p>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script type='text/javascript'>
   var vm = new Vue({
      el:"#app",
      data:{
        a:true,
        b:true
      },
      methods:{
      }
   });
 </script>

2. 语法二

<div id='app'>
    <p :class="obj">笑纳</p>
</div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script type='text/javascript'>
   var vm = new Vue({
      el:"#app",
      data:{
         obj:{
            a:true,
            b:true
          }
      },
      methods:{
      }
   });
 </script>

3.绑定class数组语法

 <div id="app">
	 <p :class="[a,b]"></p>
 </div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			a:'left',
			b:'right'
		},
		methods:{
			
		}
	});
</script>

4. 绑定style对象语法

 <div id="app">
	 <p :style="{fontSize:a,color:b}"></p>
 </div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			a:'30px',
			b:'red'
		},
		methods:{
			
		}
	});
</script>

5. v-bind 绑定style数组语法

 <div id="app">
	 <p :style="[a,b]"></p>
 </div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
		    a:{fontSize:"30px"},
			b:{color:"red"}
		},
		methods:{
			
		}
	});
</script>

---

总结

学习v-bind对象对象的相关语法知识