Vue中的样式绑定

class样式绑定:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
    <style type="text/css">
        .activated{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script>
</body>
</html>


数组变量的绑定

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
    <style type="text/css">
        .activated{
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <div id="app">
        <div @click="handleDivClick" :class="[activated]"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                activated: ""
            },
            methods: {
                handleDivClick: function() {
                    if (this.activated === "activated") {
                        this.activated = "";
                    }else {
                        this.activated = "activated";
                    }
                }
            }
        })
    </script>
</body>
</html>

style绑定:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <div id="app">
        <div :style="styleObj" @click="handleDivClick"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script>
</body>
</html>

style数组绑定:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
    <!-- <div id="app">
        <div @click="handleDivClick" :class="{activated: isActivated}"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                isActivated: false
            },
            methods: {
                handleDivClick: function() {
                    this.isActivated = !this.isActivated
                }
            }
        })
    </script> -->
    <!-- <div id="app">
        <div :style="styleObj" @click="handleDivClick"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script> -->
    <div id="app">
        <div :style="[styleObj, {background:‘yellow‘}]" @click="handleDivClick"><h1>hello world</h1></div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                styleObj: {
                    color: "black",
                    border:"1px solid red"
                }
            },
            methods: {
                handleDivClick: function() {
                    if (this.styleObj.color == "black") {
                        this.styleObj.color = "red"
                    }else {
                        this.styleObj.color = "black"
                    }
                }
            }
        })
    </script>
</body>
</html>

原文地址:https://blog.51cto.com/5660061/2419021

时间: 2024-10-08 08:06:39

Vue中的样式绑定的相关文章

横冲直撞vue(第四篇):v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

vue中引入样式文件

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

12 vue中的样式-style

vue中的样式 是动态绑定style , 对象 是无需键值对的集合 1. <h1 :style="{ color:'red' ,fontSize:'32px'}">这是最基础的一个</h1> 直接在对象中写键值对 2. <h1 :style="styleObj2">这是第一个</h1> 将键值对对象写在data中.直接动态绑定 3. <h1 :style="[ styleObj1, styleObj2

Vue基础语法(样式绑定,事件处理,表单,Vue组件)

样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>vue的样式绑定</title> <style> .a{ /*

vue中数据双向绑定的实现原理

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =

vue中class样式

一.使用class样式 1. 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 2. 数组中使用三元表达式 <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1> 3. 数组中嵌套对象 <h1 :class="['red', 'thin', {'active': isactive}]&

vue中数据双向绑定注意点

最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules="rules" ref="addClass"> <el-form-item label="表单分类名称" prop="NAME" :label-width="formLabelWidth"> &

vue中的双向绑定

概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其中用Object.defineProperty的(vue)特别简单,今天顺便记录下供以后开发时参考,相信对其他人也有用. 我参考了这篇文章:Vue.js双向绑定的实现原理. 类似双向绑定的效果 其实用事件代理就可以实现类似双向绑定的效果,原理是当检测到数据改动时会触发一个keyup事件或者表单的ch

Vue——如何在Vue中使用样式

使用class样式 1.数组 第一种使用方式,直接传递一个数组,注意:这里的class需要使用 v-bind做数据绑定 2.数组中使用三元表达式 false true 3.数组中嵌套对象 false true 4.直接使用对象(不用数组包裹) false true 既然是一个对象,那我们也可以直接在data身上写进行保存 内联样式 1.直接在元素上通过v-bind:style的形式,书写样式对象 2.将样式对象,定义到 data 中, 并直接引用到v-bind:style中 2.1在data上定