vue11-内联样式绑定

谁践踏了优雅 2022-05-10 00:12 185阅读 0赞

首先看代码：

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="root">
                
                <div :style="styleObj" @click="handleDivClick">
                    Hello world
                </div>
            </div>
    
    
            <script>
                var vm = new Vue({
                   el:"#root",
                   data: {
                    styleObj:{
                        color:"black",
                        fontSize:"30px"
                    }
                   },
                   methods:{
                    handleDivClick: function(){
                        this.styleObj.color=this.styleObj.color==="black"?"red":"black";
                    }
                   }
                })
    
            </script>
        </body>
    </html>

sytle属性绑定vue实例中的styleObj变量，给styleObj变量赋值，渲染后就会赋值给style属性。

![70][]

[70]: /images/20220510/64f5de8f65fb468e9ee21857d3d30114.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue绑定样式

3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

灰太狼/ 2023年10月02日 22:16/ 0 赞/ 22 阅读

相关 Vue｜样式绑定

![968f4c3a9001403aaa609f4e85ac2933.gif][] > class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用

小咪咪/ 2023年09月29日 23:47/ 0 赞/ 22 阅读

相关 vue给标签绑定内联样式

html代码直接在行内使用v-bind写入一个对象，属性名如果有 - 字符，必须用引号括起来 <h1 :style="styleObj1">我是一个字符串</h

朱雀/ 2023年07月11日 11:20/ 0 赞/ 24 阅读

相关 Vue_样式绑定

1.v-bind：class=‘\{activitded:isActivitded\} ’ class的对象绑定如果是是一个对象，\{red:’isRed’\}

客官°小女子只卖身不卖艺/ 2022年05月22日 13:23/ 0 赞/ 246 阅读

相关 vue11-内联样式绑定

首先看代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=

谁践踏了优雅/ 2022年05月10日 00:12/ 0 赞/ 186 阅读

相关 VUE 样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

蔚落/ 2022年03月27日 13:19/ 0 赞/ 386 阅读

相关 Vue-样式绑定

绑定class属性 v-bind:class="{样式名称：变量}" <!DOCTYPE html> <html> <head>

水深无声/ 2021年09月09日 08:08/ 0 赞/ 482 阅读

相关 Vue.js--v-bind:class绑定Class、v-bind:style绑定内联样式

绑定Class 示例：基本用法，点击按钮切换样式 <!DOCTYPE html> <html lang="en"> <head>

ゞ浴缸里的玫瑰/ 2021年08月13日 22:38/ 0 赞/ 409 阅读

相关 vue - style绑定行内样式

前言 vue中行内样式绑定采用`驼峰写法` // 写法一： :style="{ backgroundImage: 'url(' + 变量nam

迷南。/ 2021年07月26日 21:08/ 0 赞/ 1516 阅读

相关 Vue - 样式绑定

实现功能：点击一次字体变颜色，再点一次字体恢复默认颜色一. class 选择器的对象绑定 1. 对象方式 2. 数组方式

た入场券/ 2021年07月25日 15:00/ 0 赞/ 523 阅读