【Vue.js】v-bind属性绑定html元素的属性而非元素所包含的内容

浅浅的花香味﹌ 2024-03-26 18:29 17阅读 0赞

#### v-bind ####

`vue指令，用于绑定 html的元素属性`

<div id="i">
    		
            <h3 v-bind:id="msg1 | toUpCase">使用v-bind绑定的是 </h3>
            <p>html属性不能使用双大括号形式绑定，只能使用v-bind指令</pp>
            
            <h3>v-bind 原始数据：:{
       {msg1}}</h3>
            <h4 v-bind:id="msg1">.</h4>
        </div>

var vm = new Vue({
        
                el:"#i",
                data:{
        
                    
                    msg1:"i am v-bind！"
                },
                filters:{
        
                    toUpCase:function(value){
        
                        v = value ? value.toUpperCase() : ''
              
                        return v
                    }
    
                    // toUpcase (value){
        
                    //     return value ? value.toUpCase() : ''
                    // }
                }
            })

> 使用vue该命令渲染后的效果：
> 
>     <h3 id="I AM V-BIND！">使用v-bind绑定，，过滤的数据 </h3>
> 
> ![v-bind][]

[v-bind]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f6acdd3111da41d7be12e1244363961a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML-lang属性规定元素内容的语言

*所有浏览器均支持 lang 属性**。属性lang是英语language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 **注释**：lang 属性...

待我称王封你为后i/ 2024年04月20日 11:09/ 0 赞/ 77 阅读

相关【Vue.js】v-bind属性绑定html元素的属性而非元素所包含的内容

v-bind `vue指令，用于绑定 html的元素属性` <div id="i">

浅浅的花香味﹌/ 2024年03月26日 18:29/ 0 赞/ 18 阅读

相关 js获取鼠标所在html元素的id和属性

js获取鼠标所在html元素的id和属性： Code: 1. <div onclick="Get\_srcElement()"> 2. <div id="001" st

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 20:18/ 0 赞/ 59 阅读

相关 HTML 元素的属性有哪些？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ class ⭐ id ⭐ style ⭐ src ⭐ href ⭐ alt ⭐

╰半夏微凉°/ 2023年10月14日 12:56/ 0 赞/ 90 阅读

相关 HTML 元素与属性

HTML 元素 -------------------- HTML 文档由 HTML 元素定义。 -------------------- HTML 元素 <

短命女/ 2023年10月13日 08:14/ 0 赞/ 31 阅读

相关 JavaScript（JS）获取元素、改变元素的内容、修改属性

文档对象模型DOM 文档对象模型DOM是W3C组织推荐的处理可扩展标记语言的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结

淡淡的烟草味﹌/ 2022年12月21日 13:59/ 0 赞/ 414 阅读

相关 html中元素的padding属性与margin属性

padding padding-top padding-right padding-bottom padding-left

小灰灰/ 2022年08月19日 08:23/ 0 赞/ 230 阅读

相关 JS函数修改html的元素内容，及修改属性内容

修改元素内容： <body> <p id="pid">Hello</p> <button οnclick="demo()">按钮</button>

「爱情、让人受尽委屈。」/ 2022年08月05日 10:27/ 0 赞/ 206 阅读

相关 html元素的overflow属性详解

最近更新时间：2018年6月20日11:39:55 [《我的博客地图》][Link 1] 最近接手一个老项目，该项目是用EasyReport这个Web报表工具

深藏阁楼爱情的钟/ 2022年07月13日 10:17/ 0 赞/ 440 阅读

相关 Angular--HTML属性绑定和DOM属性绑定

前言上一篇博客介绍了数据绑定，意犹未尽，所以这片博客再介绍一下HTML属性绑定和DOM绑定。内容 ![这里写图片描述][70] ![这里写图片描述][70

- 日理万妓/ 2021年09月27日 08:24/ 0 赞/ 473 阅读