6 动态绑定属性

v-bind基本用法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind基本用法</title>
</head>
<body>

<div id="app">
      <h2> {{message}}</h2>
<!--    <img v-bind:src="imgurl" alt=""></img>
    <a v-bind:href="aHref">百度</a>-->
    <!--语法糖-->
    <img :src="imgurl" alt=""></img>
    <a :href="aHref">百度</a>
</div>
   <script src="../js/vue.js"></script>
<script>
  const  app=new Vue({
      el:"#app",
      data:{
        message: "你好",
        imgurl:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3544375238,114231233&fm=26&gp=0.jpg",
        aHref:"http://www.baidu.com"

      }
    })
</script>
</body>
</html>

v-bind 绑定style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind数组语法</title>
</head>
<body>
<div id="app">
      <h2 :style="[baseStyle,baseSize]"> {{message}}</h2>
</div>
   <script src="../js/vue.js"></script>
<script>
  const  app=new Vue({
      el:"#app",
      data:{
        message: "你好",
        baseStyle: {backgroundColor: 'red'},
        baseSize: {fontSize: '100px'},

      }
    })
</script>
</body>
</html>

动态绑定class对象语法
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态绑定class对象语法</title>
</head>
<style>
.active{
color: red;
}
</style>
<body>

<h2 v-bind:class="{active: isActive,line:isLine}">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好",
active: 'active',
isActive: false,
isLine: true
},
methods:{
btnClick:function (){
this.isActive=!this.isActive
}
}
})
</script>
</body>
</html>

···
v-bind动态绑定classs数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind动态绑定classs数组语法</title>
</head>
<body>
<div id="app">
    <h2 class="title" :class="[active,line]"> {{message}}</h2>
    <h2 class="getClasses()"> {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好",
      active: 'aaaa',
      line: 'bbbb'
    },
    methods: {
      getClasses: function () {
          return [this.active,this.line]
      }
    }

  })
</script>
</body>
</html>

image.png

v-bind动态属性绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind动态属性绑定</title>
</head>
<body>
<div id="app">
   <!-- <h2 :style="{key(属性名):value(属性值)}"> {{message}}</h2>-->
    <!--  <h2 :style="{fontSize: '50px'}"> {{message}}</h2>-->
    <h2 :style="{fontSize: finalSize,backgroundColor:finalColor}"> {{message}}</h2>
</div>
   <script src="../js/vue.js"></script>
<script>
  const  app=new Vue({
      el:"#app",
      data:{
        message: "你好",
        finalSize: '100px',
        finalColor: 'red'
      }
    })
</script>
</body>
</html>

动态绑定数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定数组语法</title>
</head>
<body>
<div id="app">
      <h2 :style="[baseStyle,baseStyle1]"> {{message}}</h2>
</div>
   <script src="../js/vue.js"></script>
<script>
  const  app=new Vue({
      el:"#app",
      data:{
        message: "你好",
        baseStyle:{backgroundColor:'red'},
        baseStyle1:  {fontSize:'60px'}
      }
    })
</script>

</body>
</html>

最后编辑于：2020.09.04 11:31:16