Vue基础 if,for,bind

目录

• Vue基本语法
  • 判断循环
• Vue模板语法
  • 文本
  • 属性
  • v-bind
  • v-on

Vue基本语法

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>
      

Vue模板语法

1. 文本

   <span>{{message}}</span>
   

2. 属性

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

3. v-bind

   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. v-on

   用于绑定HTML事件

   缩写为 @事件名