vue学习日志，v-bind指令

本文主要是介绍vue学习日志，v-bind指令，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

简介

v-bind指令用于动态绑定属性。

动态绑定属性

<div id="app">
        <h2>{{message}}</h2>
        <img v-bind:src="imgUrl" alt="">
        </div>
    <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
              imgUrl:"img url"
          }
      })
    </script>

语法糖写法:

 <img :src="imgUrl" alt="">

v-bind动态绑定class（1）

   <div id="app">
        <h2 v-bind:class="active">{{message}}</h2>
        <h2 :class="active">{{message}}</h2>
         </div>
 <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
              active:"active"
          }
      })
    </script>

v-bind动态绑定class（2）

通过对象的方式绑定,在下面的h2的class中{}表示一个对象{key:boolean}的形式，当boolean时true时，key类名存在，对象中可以有多个键值对。

   <div id="app">
        <h2 v-bind:class="{'active':isActive,'line':isLine}">{{message}}</h2>
    </div>
    <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
              isActive:true,
              isLine:false
          }
      })
    </script>

v-bind动态绑定class（3）

通过函数返回值的方法返回对象

   <div id="app">
        <h2 v-bind:class="getClass()">{{message}}</h2>

    </div>
    <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
              imgUrl:"img url",
              isActive:true,
              isLine:false
          },
          methods:{
            getClass:function(){
              return{active:this.isActive,line:this.isLine}
            }
          }
      })
    </script>

v-bind动态绑定class（4 数组语法）

   <div id="app">
        <h2 v-bind:class="active">{{message}}</h2>
        //语法糖写法
        <h2 :class="["aaa","bbb"]">{{message}}</h2>
    </div>
    <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
              imgUrl:"img url",
              active:"active"
          }
      })
    </script>

v-bind 动态绑定style

   <div id="app">
        <h2 v-bind:style="{css:值,css:值}">{{message}}</h2>
	 </div>
    <script>
         let app=new Vue({
          el:'#app',
          data:{
              message:"你好啊，小明同学",
          }
      })
    </script>

这篇关于vue学习日志，v-bind指令的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！