vue学习日志，v-bind指令

2021-04-13 10:34:09 阅读：134 来源： 互联网

标签：el vue bind app 绑定 new 日志 message

简介

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>

标签：el,vue,bind,app,绑定,new,日志,message
来源： https://blog.csdn.net/weixin_45124398/article/details/115655384

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9