vue的动态绑定属性


1、v-bind的class用法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind设置class类的方法</title>
  <script src="../js/vue.js"></script>
  <style>
    .active{
     color: red;
    }
    /* .start{
      color: aqua;
    } */ 
  </style>
</head>

<body>
  <div id ="app">
    <!-- <h2 class="active">{{message}}</h2>

   <h2 class="start">{{message}}</h2> -->
   <h2 v-bind:class="{active:isactive,line:isLine}">{{message}}</h2>
   <!-- //通过定义类的属性来显示是否加载和显示类 -->
   <button v-on:click="btnclick">按钮</button>
  </div>

  <script>
    //v-bind动态绑定class属性
   //创建Vue实例,得到 ViewModel
   //普通的给对象类设置css属性
   //给普通的类设置对象的方法
   //1、通过声明式方法建立设置数据的值
   //2、在要显示内容的div里面定义类
   //3、在头部标签中设置要显示内容的css样式
   //实现点击一个按钮，显示的文字变换颜色

   var vm = new Vue({
    el: '#app',
    data: {

      message:'你好啊！',
      isactive:true,
      isLine:false
    },
    methods:{
      btnclick:function(){
        this.isactive=!this.isactive
      }
    }
    
   });
  </script>
</body>

</html>

2、v-bind:用来动态绑定属性，从而解析显示网址所对应的图片或者是网址跳转

<body>
  <div id ="app">
    <!-- 需要给图片动态绑定属性，才能显示图片和跳转到相应的地址 -->
     <img v-bind:src="imageUrl">
     <a v-bind:href="ahref">百度一下</a>
     </div>

  <script>
   //创建Vue实例,得到 ViewModel
   //引入一个图片地址，并进行动态绑定属性
   var vm = new Vue({
    el: '#app',
    data: {
     imageUrl:'data:image/png;base64,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',
     ahref:'http://www.baidu.com'
    }
    
   });
  </script>
</body>

3、v-bind的动态绑定style的对象语法：

<body>
  <div id ="app">
    <!-- <h2 :style{属性名：属性值}>{{message}}</h2> -->
    <h2 :style="{fontsize:'100px'}">{{message}}</h2>
    <!-- 在文中的属性值设置像素大小是应该显示应该加入引号 -->
    <h2 :style="{fontsize:finalsize}">{{message}}</h2>
    <h2 v-bind:style="{fontsize:finalsize+'px',color:finalcolor,background:fianlcol}">{{messageh2>
    <!-- //给style动态绑定设置失败 -->
    <!-- 动态绑定字体文字的对象文子语法： -->
    <h2 :style="{fontsize:finalsize}">{{message}}</h2>
  </div>
  <!-- //不知为何，设置的文字大小属性竟然无效 -->

  <script>
   //创建Vue实例,得到 ViewModel
   //
   var vm = new Vue({
    el: '#app',
    data: {
     message:'你好啊！',
     finalsize:'100px',
     finalcolor:'red',
     fianlcol:'blue'
    }
    
   });
  </script>
</body>

4、v-bind动态绑定style的数组语法：

<body>
  <div id="app">
    <!--把finalSize当作一个变量使用-->
    <h2 :style="{fontSize: finalSize + 'px' , backgroundColor: finalColor}">{{message}}</h2>
  </div>
  <script>
      const app = new Vue({
          el: '#app',
          data: {
            message:'你好呀',
            finalSize: 100,
            finalColor: 'red',
          }
          // 此时通过设置的基本变量里面包含的对象类型，数组可以包含多个变量的值
      })
  </script>
  </body>

posted @ 2022-03-03 09:12 starter123 阅读(441) 评论(0) 收藏举报

刷新页面返回顶部

starter123

vue的动态绑定属性

公告