Vue：动态绑定样式（v-bind）

v-bind 将属性交给vue管理

使得属性能取得vue的值从而实现动态变化

动态绑定class
绑定样式 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>
  <style>
    .a{
      height: 80px;
      width: 50px;
     background-color: aqua;
    }
    .b{
      background-color: rebeccapurple;
    }
    .c{
      background-color: palegreen;
    }
  </style>
</head>
<body>
<div id="firstVue">
 <h1>绑定class</h1>
   //根据：class动态的绑定样式 v-bind将数据绑定到属性
  <div class="a" :class="x" @click="changemod">{{firstname}}</div>
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
       firstname:"张",
       x:"b"
    },
   methods:{
      changemod(){
       this.x="c"
      }
   }
  })
  console.log(v)
</script >
</html>
动态绑定style

正常使用style： <div style="font-size: 50px">{{firstname}}</div>
Vue要求使用：号时要是一个对象

绑定style 
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="js/vue.js"></script>
  <title>Title</title>

</head>
<body>
<div id="firstVue">
 <h1>动态绑定style</h1>
  //对于有-的属性去掉-,并且变成大写
  //{要满足是一个对象}
  <div class="a" :style="{fontSize: x+'px'}"  @click="changemod">{{firstname}}</div>
</div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  let v=new Vue({
    el:"#firstVue",
    data:{
       firstname:"张",
       x:"b"
    },
   methods:{
      changemod(){
       this.x="90"
      }
   }
  })
  console.log(v)
</script >
</html>
posted @ 2021-11-08 16:55  旅祸少年  阅读(1076)  评论(0)    收藏  举报