Vue v-bind之对象语法（003）

最新推荐文章于 2024-07-05 11:27:33 发布
最新推荐文章于 2024-07-05 11:27:33 发布
阅读量534 收藏
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31707323/article/details/115491107
版权

v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
    <title>v-bind</title>
</head>
<body>
<input id="app" v-bind:value="message"> 使用 </input>

<script>
    let vm=new Vue({
         el:"#app",
         data:{
               message:"hello wold"
         }
    })
</script>

</body>
</html>

效果如下：
在这里插入图片描述

- 对象语法

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
   <meta charset="UTF-8">
   <script src="../js/vue.js"></script>
   <title>v-bind</title>

   <style>
       .box{
           background-color: #ff0;
       }
       .textColor{
           color: #0048FF;
       }
       .textSize{
           font-size: 30px;
       }
   </style>

</head>
<body>
   <ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">
       <li>学习Vue</li>
       <li>学习Node</li>
       <li>学习React</li>
   </ul>
   
   <script>
       var vm= new Vue({
           el:".box",
       data:{
           isColor:true,
           isSize:true
       }
       })
   </script>

</body>
</html>

效果如下：
在这里插入图片描述
直接绑定数据里的一个对象

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <script src="../js/vue.js"></script>
    <title>v-bind</title>
    <style>
        .box{
            background-color: #ff0;
        }
        .textColor{
            color: #0048FF;
        }
        .textSize{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <ul class="box" :class="classObject">
        <li>学习Vue</li>
        <li>学习Node</li>
        <li>学习React</li>
    </ul>
    <script>
        var vm= new Vue({
            el:".box",
             data:{
                classObject:{
                textColor:true,
                textSize:false //不渲染，注意看下面的截图
                }
            }
        })
    </script>

</body>
</html>

效果如下：
在这里插入图片描述

从小白小菜开始
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的常用指令【v-bind v-for v-on v-model 自定义指令】
weixin_46336091的博客
11-16 776
除了用内置的指令完成vue工作需要后，还可以根据vue提供的方案完成自定义指令自定义指令：操作domdom对象.style.color='red'自定义指令它提供了5个钩子函数，它可以帮我们实现所需要的各种业务场景el 当前绑定到指令元素的dom对象,bindings 修饰符和传入的值bind 第一次绑定到元素时调用inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 数据更新时调用。
如何理解vue中的v-bind？
开源世界
09-16 2039
如果你写过vue，对v-bind这个指令一定不陌生。 下面我将从源码层面去带大家剖析一下v-bind背后的原理。 会从以下几个方面去探索： v-bind关键源码分析 v-bind化的属性统一存储在哪里：attrsMap与attrsList 绑定属性获取函数 getBindingAttr 和 属性操作函数 getAndRemoveAttr v-bind如何处理不同的绑定属性 v-bind:key源码分析 v-bind:title源码分析 v-bind:class源码分析 v-bind:style源码分析 v-
Vue v-bind: 接收一个单独的对象
可控的事情要谨慎，不可控的事情要乐观。
10-10 1097
<script src="https://unpkg.com/vue"></script> <div id="blog-post-demo" class="demo"> <div :style="{ fontSize: postFontSize+'em' }"> <blog-post v-for="post in po...
Vue.js 中的 v-bind 指令：作用与使用详解
My_wife_QBL的博客
07-05 2021
在 Vue.js 中，指令是以v-前缀开头的特殊属性。指令的值可以是 JavaScript 表达式，用于在 DOM 元素上添加特定的行为。v-bind指令是 Vue.js 中用于动态绑定 HTML 属性和组件属性的重要指令。通过v-bind指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。v-bind指令的基本用法包括绑定 HTML 属性、绑定组件属性和绑定动态属性。高级用法包括绑定对象、绑定数组和绑定计算属性。在实际开发中，v-bind。
v-bind绑定对象
qq_42928070的博客
08-10 787
父组件 子组件 // 子组件 this.myName = 111; this.myValue = 222
VUE_v-bind 传入一个对象的所有属性
小歪博客
04-14 1601
官方文档
Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为
Jay的博客
01-27 1481
前言 本笔记主要基于官方文档《迁移策略——v-bind 合并行为》编写。如有理解出入，请以官方文档为主。 知识储备： 《Vue api —— v-bind 》 概述 Vue 3.x 中，v-bind=“object” 的绑定顺序会影响渲染结果。 Vue 2.x 的 v-bind 合并行为 在 Vue 2.x，如果一个元素同时定义了 v-bind="object" 和一个相同的单独的 property （属性），那么这个单独的 property 总是会覆盖 object 中的绑定。 如下： <tem
Vue reactive ref v-bind 语法示例演示代码
最新发布
07-17
bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-bind 语法示例演示代码Vue reactive ref v-...
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
二、vue中v-bind使用
周国良的博客
03-24 3520
一、v-bind基本使用 一个页面中，除了标签内容需要动态绑定外，标签的属性也需要动态绑定，例如：a元素的href属性和img元素的src属性。这时就需要用到v-bind了。 <body> <div id="app" > <!-- 动态绑定图片路径 在元素属性前面加b-bind指令即可--> <img v-bind:src="imgUrl"> <!-- 动态绑定链接 在元素属性前面加b-bind指
五、vue基础-指令之v-bind
Sean_0819的博客
04-19 7576
前面要讲的一系列指令，主要是将值插入到模板内容中。但是，除了内容需要动态来决定外，某些我们也希望动态来绑定。
vue 中 v-bind 合并行为
文摘资讯
11-09 608
v-bind 的绑定顺序会影响渲染结果。常见的场景是在一个元素中同时使用 v-bind="object" 语法绑定属性和单独绑定属性。然而，这就引出了关于合并的优先级的问...
vue基础一：认识vue、数据绑定（v-bind\v-model）、Object.defineproperty()数据代理
白骨梦儿
11-17 616
vue基础一：认识vue、数据绑定（v-bind\v-model）、数据代理一、js及vue开发基本了解二、初识Vue：MVVM模式三、模板语法四、数据绑定：单向、双向五、el与data的两种写法六、Vue数据代理原理：Object.defineproperty()6.1 Object.defineproperty()的使用：6.2 Object.defineproperty()基本配置项：6.3 Object.defineproperty()高级配置项（重要）：get、set6.4 数据代理-定义6.5
V-bind详细使用
热门推荐
CaseyWei
10-22 6万+
v-bind 主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如： 1 2 &lt;!--完整语法--&gt; &lt;av-bind:href="url"&gt;&lt;/a&gt; 1 2 &lt;!--缩写--&gt; &lt;a:href="url"&amp...
【Vue】Vue中v-bind的使用
一只洒鹿
06-24 1万+
Mastache语法不能作用于HTML特性上，遇到这种情况应该去使用v-bind指令 对于布尔特性，它比较特殊，他们只要存在就意味着值为true， v-bind:disabled使用要特别注意下 <button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button> 上面的代码中，如果isButtonDisabled的值是null、undefined或者false，则disabled特性甚至不会被包含在渲染出来的
v-bind详解
weixin_44707104的博客
05-07 607
对象语法 通常，我们会传给v-bind一个对象，这样我们可以动态地切换一些属性值，比如绑定Class或者Style，像这样 // isBlue是布尔值，blue类是否存在取决于isBlue是否为真 <div :class="{ blue: isBlue }"></div> // thisFont是变量，字体大小随thisFont而变化 <div :style="{...
总结一下vue中v-bind的常见用法
罗铠威的博客
10-20 985
本篇博客主要总结一下v-bind命令在vue中的常见用法。
Vue.js：使用v-bind在列表选项上绑定对象
零小唬的博客
01-11 625
Vue.js：使用v-bind在列表选项上绑定对象
vue中v-bind常见用法及综合案例：class点击切换
Jolly_zhang的博客
11-07 1537
vue中v-bind常见用法及综合案例：class点击切换
vue v-bind使用
08-04
Vue中的v-bind指令用于将Vue实例中的数据绑定到HTML元素的属性上，实现响应式更新。一般情况下，我们不能直接使用插值语法{{ }}来绑定属性值，而是需要使用v-bind指令。例如，我们可以使用v-bind:title来将Vue实例中的tit数据绑定到元素的title属性上，实现属性值的动态更新。具体用法如下： ```html <h1 v-bind:title="tit">this is test</h1> ``` 另外，v-bind指令还有一个简写形式，即使用冒号(:)来代替v-bind。例如，上述代码可以简写为： ```html <h1 :title="tit">this is test</h1> ``` 需要注意的是，在属性值内部不能直接写入一些特殊语法，比如样式属性的写法。如果需要绑定样式属性，可以使用对象语法或数组语法。例如： ```html <h1 :style="{ fontSize: '50px', color: 'red' }">this is test</h1> ``` 总结起来，v-bind指令用于将Vue实例中的数据动态绑定到HTML元素的属性上，实现响应式更新。可以使用v-bind或简写形式(:)来指定要绑定的属性，并使用Vue实例中的数据进行绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值