vue11-内联样式绑定

最新推荐文章于 2024-03-12 20:29:27 发布

一笑而过者也

最新推荐文章于 2024-03-12 20:29:27 发布

阅读量192

点赞数

分类专栏： Vue 文章标签： vue vue内联样式修改

本文链接：https://blog.csdn.net/u012326462/article/details/82821327

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

首先看代码：

<!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属性。

一笑而过者也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue11-内联样式绑定

首先看代码：&lt;!DOCTYPE html&gt;&lt;html lang=en&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Hello world&lt;/title&gt; &lt;script src="vue.js&quot
复制链接

扫一扫

专栏目录