Vue指令03——v-bind和v-for的使用

Vue指令03——v-bind和v-for

v-bind命令

效果:更改元素属性,如 src、title、href

格式:v-bind:属性=”变量“

格式::属性=”变量“

修改行类样式1

<!--绑定样式-->
<div id="app">
  <!-- 绑定样式属性值 -->
  <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
         <!-- 绑定样式对象 -->
         <div v-bind:style=“myDiv”></div>
  </div>
</div>

<script>
var app=new Vue({
    el:"#app",
    data: {
    //变量名:值
     pink:'pink',
     width:'100%', 
     height: '200px'
     
       //字典型数据,驼峰写样式
      myDiv:{
      backgroundColor: 'red', 
      width: '100px',
      height: '100px‘ 
   }
        
}

    })
</script>
<body>
    <!--绑定样式-->
    <style>
        .box1 {
            background-color: pink;
            width: 500px;
            height: 600px;
        }

        #box2 {
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .box3 {
            margin-top: 20px;
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>

    <div id="app" :class="B1">
        <div :id="B2"> </div>
        <div :class="B3"> </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                B1: "box1",
                B2: "box2",
                B3: "box3"
            }

        })
    </script>
</body>

v-for命令

作用:自动添加元素

格式1:v-for="变量 in 数组/值"

格式2:v-for="(变量,下标变量) in 数组"

this.数组名.push(数据) //在数组最后添加数据

this.数组名.shift() //删除数组最后的数据

this.数组名.splice(下标,1); //删除数组指定的数据 ,1代表删1条

<div id="acc">
    <button @click="add">按钮+</button>
    <button @click="rm">按钮—</button>
<ul>
     <!--把数组arr的值赋给变量it,index为下标变量-->
    <li v-for="(it,index) in arr">{{index}}_{{it}}</li> 
     <!--把数组vc的值赋值给info-->
    <li v-for="info in vc">{{info.name}}</li>

</ul>

</div>
<script>
    var info=new Vue({
        el:"#acc",
        data:{
            //数组1
            arr:["好运来!","好运离开","痛苦棘手"],  
            //  数组2,值是对象
            vc:[{name:"小明"},{name:"小红"}]
        },
        methods:{
           add:function(){
               //push:在数组后添加值
            this.vc.push({name:1234})
           },
           rm:function(){
               //shift:从数组左边移出值
               this.vc.shift()
           }
        }
    })
</script>
posted @ 2022-03-29 22:58  永恒之月TEL  阅读(120)  评论(0编辑  收藏  举报