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  阅读(122)  评论(0)  编辑  收藏  举报