v-bind指令的使用

最新推荐文章于 2024-07-05 11:27:33 发布

驮石的乌龟

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量421

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/qq_44363897/article/details/104382887

版权

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

一、v-bind指令

1.用法

动态的绑定一个或多个属性或一个组件 prop 到表达式
在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象
在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

2.语法糖写法以及绑定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指令的使用</title>
 <style>
     .active{
         color:red;
     }
     .font{
         font-size: 50px;
     }
     .aa{
         color:blue;
     }
 </style>
</head>
<body>
 <div id="app">
     <!-- 给那个属性动态的赋值就在那个属性前面加v-bind -->
     <img v-bind:src="imgURL" alt="李沁">
     <a v-bind:href="aURL">百度一次</a>
     <!-- 语法糖写法 -->
     <a :href="aURL">百度次</a>
     <!-- v-bind动态绑定Class属性 -->
     <h2 class="active">{{message}}</h2>
     <h2 :class="active">{{message}}</h2>
     <!-- v-bind动态绑定class(对象语法) -->
     <!-- 语法 : <h2 :class="{类名1:boolean,类名2:boolean,...}"></h2> 将boolean值可以动态的绑定-->
     <!-- 查看源码可知有两个class属性 -->
     <!-- 可以有多个class，vue内部最后会合并成一个class -->
     <h2 class="font" :class="getClass()">vklcxm</h2>
     <button v-on:click="BtnClick()">按钮</button>
     <!-- v-bind动态绑定class(数组语法) -->
     <!-- class数组中的值加单引号与不加蛋引号是不一样的，加单引号说明是一个字符串，Vue直接
         解析成一个class名，不加单引号说明是一个变量，Vue解析成变量对应的值
     -->
     <h2 class="font" :class="['active','line']">1111111111111</h2>
     <!-- 源码中类名为aa和bb -->
     <h2 :class="[active1 , line1]">2222</h2>
     <h2 :class="getClassArray()">2333</h2>
 </div>
 <script type='text/javascript' src='js/vue.js'></script>
 <script type='text/javascript'>
     const app =new Vue({
         el : "#app",
         data : {
             message : "ddddd",
             imgURL:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1579933278&di=4c443ec84a240f1f2cd2c9af0d1de65b&src=http://pics0.baidu.com/feed/c75c10385343fbf21eb472d60c8dd08667388fa1.jpeg?token=0cf3d5b0c070b5797e420209e17d593c&s=96A6D14ED4F03596C91104F80300C01E",
             aURL:"http://www.baidu.com",
             active:"active",
             isActive: true,
             isLine:true,
             active1: "aa",
             line1:"bb"
         },
         methods : {
         	//注意vue的methods中不能使用箭头函数，使用箭头函数会使this无法正确指向
             BtnClick: function(){
                 this.isActive = !this.isActive;
             },
             getClass: function(){
                 return {active:this.isActive , line:this.isLine};
             },
             getClassArray:function(){
                 return [this.active1 , this.line1];
             }
         }
     })
 </script>
</body>
</html>

3.绑定style

<!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绑定style</title>
</head>
<body>
   <div id="app">
       <!-- v-bind绑定style(对象语法) -->
       <!-- <h2 :style="{css属性名:属性值,css属性名:属性值,...}"></h2> -->
       <h2 :style="{fontSize:'50px',color:'blue'}">eeee</h2>
       <h2 :style="getStyle()">{{message}}</h2>
       <!-- 驼峰命名法可以不用加引号 -->
       <h2 :style="{ fontSize : fonS1 + 'px'}">{{message}}</h2>
       <!-- v-bind绑定style(数组语法) -->
       <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>

   </div>
   <script type='text/javascript' src='js/vue.js'></script>
   <script type='text/javascript'>
       const app = new Vue({
           el : "#app",
           data : {
               message : "ddd",
               fonS: '100px',
               fonS1 : 100,
               baseStyle : {color : 'red'},
               baseStyle2 : {fontSize : 40+'px'}
           },
           methods : {
               getStyle : function(){
                   return {'font-size' : this.fonS}
               }
           }
       })
   </script>
</body>
</html>

4.修饰符

.prop：作为一个 DOM property 绑定而不是作为 attribute 绑定。
首先，要搞清楚HTML DOM Attribute 对象

HTML DOM 节点:
在 HTML DOM （文档对象模型）中，每个部分都是节点
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Attr 对象:
在 HTML DOM 中，Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。

https://segmentfault.com/a/1190000012820563
这个链接讲的很不错
.camel
将 kebab-case(短横线命名方式) 转换为 camelCase(驼峰命名法). (从 2.1.0 开始支持)
.sync：语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

官网详解
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

驮石的乌龟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-bind指令的使用

一、v-bind指令1.用法动态的绑定一个或多个属性或一个组件 prop 到表达式在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。2.语法糖写法：(冒号)<...
复制链接

扫一扫

专栏目录