vue学习的开端，指令学习笔记

插值语法

<div>计算{{calculate}}</div>

export default {
data(){
return{
calculate:"a"
}

v-语法

 <div v-bind:class={wo:a}></div>//wo：是class名称，:a用来判断是否绑定
  <a :href='url'></a>//v-bind:href绑定了一个href属性，值为url
  
  <div v-on:click="w">1</div>//v-on绑定一个点击事件
  
  <input type="text" v-model="mes">//v-model:绑定数据
  <div >{{mes}}</div>//绑定数据，然后显示
  
  <div v-if="trya">aaa</div>//if判断，true就显示，否则不显示
  <div v-if="tryb"></div>//if判断，true就显示，否则不显示

   <div v-if="tryc">v-if</div>//哪个是true，就执行那个，都不是，那就执行最后一个
  <div v-else-if="tryd"> v-else-if</div>//哪个是true，就执行那个，都不是，那就执行最后一个
  <div v-else>v-else</div>//哪个是true，就执行那个，都不是，那就执行最后一个

 <div :key="item.name"  v-for=" (item,index) in items" >//循环列表
    {{mesa}} -{{index}} -{{item.name}}
   </div>

<div v-for="item in items" :key="item.name">//循环列表
    {{item.name}}
  </div>
  export default {
    data(){
      return{
         a:true//当为true，就可以绑定class名
         url:"www.baidu.com"，
         mes:""//上面引用了，所以得定义一个实例，不然会警告
         trya:true,//if判断为真，显示
         tryb:false,//if判断为假，不显示
         tryc:false,//v-if="tryc"不执行
         tryd:true,//v-else-if="tryd"为真，执行
       	 mesa:1,
       	  items:[
      {
        name:1,
       
      }
     ],
      item:[{

      }],
    }
  },
}
</script>