测开vue学习2： 指令

• 插值表达式 格式{{内容}}
  例如：

<template>
   <div>
       <!-- 插值表达式 -->
      <p>{{name}}{{message1}}</p> 
   </div>
</template>
<script>
export default {
    name:'study',
    data(){
        return{
            message1:'学习努力学习vue',
            name:'zzz'

        }

    }

}
</script>

• v-bind ： 属性值
  绑定属性值，v-开头为VUE中的指定有特殊含义，v-bind绑定属性值
• 缩写 ：

   <!-- v-开头为VUE中的指定有特殊含义，v-bind绑定属性值 -->
      <span v-bind:title="dream">小目标</span>
<script>
export default {
    name:'study',
    data(){
        return{
            message1:'学习努力学习vue',
            name:'zzz',
            dream :'小目标'

        }

    }

}
</script>

• v- if 条件判断
  每次都会重新创建和删除元素，还有v-else-if,v-else

 <P v-if="isnot">判断显示</P>
<script>
export default {
    name:'study',
    data(){
        return{
            message1:'学习努力学习vue',
            name:'zzz',
            dream :'小目标',
            isnot:false,

        }

    }

}
</script>

• v-show
  每次不会重新进行dom创建和删除操作，知识切换了元素的display属性

      <P v-show="show">show显示</P>

image.png

• v-for 循环

<template>
  <table class="box">
      <tr >
          <th v-for="(item, key) in project_handers" v-bind:key="key" >{{item}}</th>
         
        </tr>
        <!-- v-bind 缩写为： -->
      <tr v-for="(item1 , key) in  projieces" :key="key">
          <td>{{item1.name}}</td>
          <td>{{item1.leader}}</td>
          <td>{{item1.app_name}}</td>
         
      </tr>
      

  </table>
</template>

<script>
export default {
    name: 'Projecttable',
    data(){

     return{
         project_handers:['项目名称','项目负责人','P2P平台'],
         projieces:[
             {name:'前程贷',leader:'笨笨',app_name:'平台应用'},
             {name:'前程贷',leader:'笨笨',app_name:'平台应用'},
             {name:'前程贷',leader:'笨笨',app_name:'平台应用'},
         ]
     }
    }

}
</script>

<style>
 .box{
     color: blue;
     margin: 50px auto;
     padding: 2px;
     
 }
 td,th{
     border: 1px solid #dddddd;
 }

</style>