vue 的属性绑定

40 阅读1分钟
  • 用v-bind:给元素绑定属性,可以使属性值为变量
    标准写法: v-bind:属性="变量"
    data的属性可以直接使用,如果时data属性里的值就需要用对象取值
<style>
   .div1{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: #ccc;
   }
   img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
   }
</style>
<body>
    <!-- data的属性可以直接使用,如果时data属性里的值就需要用对象取值 -->
   <div id="app">
    <div class="box1">{{usermsg.name}}</div>
    <!-- 用v-bind:给元素绑定属性,可以使属性值为变量 -->
    <div v-bind:class="box1">{{usermsg.name}}</div>
    <img v-bind:src="usermsg.touxiang" alt="">
    <!-- v-bind:有语法糖,直接使用:就可以 -->
  <input type="text" :value="usermsg.rename">
    <div></div>
    <div></div>
   </div> 
   <script>
    var vm=new Vue({
        el:"#app",
        data:{
            box1:"div1",
           usermsg:{
            name:"xiumin",
            rename:"baozi",
            touxiang:"./1.jpg"
           }
        }
    })
   </script>
</body>

image.png