（Sjran）vue.js第三天学习-CSDN博客

本文链接：https://blog.csdn.net/qq_45506707/article/details/99302885

1.vue绑定class样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .red{
      color:red;
    }

    .thin{
      font-weight: 200;
    }

    .italic{
      font-style: italic;
    }

    .active{
      letter-spacing: 0.5em;
    }
  </style>
</head>
  
    <body>
      <div id="app">
        <h1 class="red thin">杭州师范大学</h1>
        <h1 :class="['red','italic',{'active':flag}]">杭州师范大学</h1>
        <h1 :class="{red:true , thin:true , active:true}">杭州师范大学</h1>
        <h1 :class="classobj">杭州师范大学</h1>

		四种方法

      </div>

      <script>
        var vm = new Vue({
          el:'#app',
          data:{
            flag:true,
            classobj:{red:true , thin:true , active:true}
          },
          methods:{

          }
        })
        
      </script>


    </body>
  

</html>

2.style的绑定方式

<h1 :style="styleobj">杭州师范大学</h1>
  <h1 :style="[styleobj,styleobj1]">杭州师范大学</h1>
  在data里写（与上述class大致相同）
   styleobj:{color:'red' , 'font-weight':200},
   styleobj1:{'font-style':'italic'}

3.v-for循环的学习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  
</head>
  
    <body>
      <div id="app">
        <p v-for="(item,i) in list">索引值：{{i}} 每一项：{{ item }}</p>
        <p v-for="item in list1">{{item.id}}---{{item.name}}</p>
        <p v-for="(val,key) in user">{{val}}---{{key}}</p>
        <p v-for="count in 10">{{count}}次循环</p>
      </div>

      <script>
        var vm = new Vue({
          el:'#app',
          data:{

            list:[1,2,3,4,5,6],
            
            list1:[
              {id:1,name:'sjr1'},
              {id:2,name:'sjr2'},
              {id:3,name:'sjr3'},
              {id:4,name:'sjr4'},
            ],

            user:{
              id:1,
              name:'Sjran',
              gender:'男'
            }
              

            
            
          },
          methods:{

          }
        })
        
      </script>


    </body>
  

</html>

4 利用for写的一个添加页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  
</head>
  
    <body>
      <div id="app">

      <div>
        <label>Id:
          <input type="text" v-model="id">
        </label>

        <label>Name:
          <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">

      </div>

      
       <p v-for="item in list" :key="item.Id">
         <input type="checkbox">{{item.Id}}-----{{item.name}}
        </p>
      </div>

      <script>
        var vm = new Vue({
          el:'#app',
          data:{
            id:'',
            name:'',
           list:[
             {Id:1 , name:'杭州师范大学'},
             {Id:2 , name:'浙江大学'},
             {Id:3 , name:'温州大学'},
             {Id:4 , name:'清华大学'},
           ]
            
          },
          methods:{
            add(){
              this.list.unshift({Id:this.id,name:this.name})
            }
          }
        })
   
      </script>


    </body>
  

</html>

注意最好在v-for后面加上唯一指定类型key值如上诉的:key=“item.Id”

从现在开始省略掉开头结尾等代码直接关键部分代码展示

5.v-if 和 v-show

 <body>
      <div id="app">
        <input type="button" @click="toggle" value="toggle">
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <h3 v-show="flag">这是用v-show控制的元素</h3>
      </div>

      <script>
        var vm = new Vue({
          el:'#app',
          data:{
            flag:true

            
          },
          methods:{
            toggle(){
              this.flag=!this.flag
            }
           
          }
        })
        
      </script>


    </body>

v-if：每一次都会重新删除创建元素
v-show：不会重新删除和创建元素只是隐藏元素切换了display：none样式
如果元素频繁切换推荐不使用v-if
反之如果涉及永久删除则不推荐用v-show