Vue基礎 if,for,bind

目錄

• Vue基本文法
  • 判斷循環
• Vue模闆文法
  • 文本
  • 屬性
  • v-bind
  • v-on

1. 1. /*判斷*/
      
      <div id="app">
          <h1 v-if="type === A">A</h1>
      	<h1 v-else-if="type === B">B</h1>
      	<h1 v-else>No</h1>
      </div>
      
          <script crossorigin="anonymous" integrity="sha512-tbfpVZegVjOUS9H3X526XZJxi/dPnhiGRM8Z83AY8kbFBrZLuug/mU57PJJsdXn38dlXjrUxtaEOl11Y1uoaRQ==" src="https://lib.baomitu.com/vue/3.0.5/vue.cjs.js"></script>
      <script>
      	var vm = new Vue({
              el:"#app",
              data:{
                  type: 'A'
              }
          });
      </script>
                 

   2. /*循環*/
      
      <div id="app">
          <li v-for="item in items">
          	{{item.message}}
          </li>
      </div>
      
          <script crossorigin="anonymous" integrity="sha512-tbfpVZegVjOUS9H3X526XZJxi/dPnhiGRM8Z83AY8kbFBrZLuug/mU57PJJsdXn38dlXjrUxtaEOl11Y1uoaRQ==" src="https://lib.baomitu.com/vue/3.0.5/vue.cjs.js"></script>
      <script>
      	var vm = new Vue({
              el:"#app",
              data:{
                  items:{
                      {message: '123'},
                  	{message: '456'}
                  }
              }
          });
      </script>
                 

1. <span>{{message}}</span>
              

2. <div v-bind:id="dynamicId"></div>
              

3. HTML屬性中的值使用v-bind

   縮寫為 :屬性名

   <div id="app">
       <a v-bind:href="url">百度</a>
   </div>
   
   var app = new Vue({
   	el:"#app",
   	data:{
   		url:"https://www.baidu.com",
   	}
   })
              

   動态參數

   <a v-bind:[attributeName]="url"></a>
              

   ​ 當vue執行個體有一個 data property attributeName，它的值可以動态綁定到v-bind

   當值為href，上述綁定等價于 v-bind:href

4. 用于綁定HTML事件

   縮寫為 @事件名