vue class、style样式绑定

Love The Way You Lie 2021-11-02 09:02 509阅读 0赞

*  **class对象方式绑定**

<div id="app">
            <div @click="handleDivClick" :class="{activated: isActivated}">
                Hello world
            </div>
        </div>
        
        <script> var vm = new Vue({ el: '#app', data:{ isAcrivated: false }, methods:{ handleDivClick: function(){ this.isActivated = !this.isActivated; } } }); </script>

*  **class数组方式绑定**

<div id="app">
            <div @click="handleDivClick" :class="[activated]">
                Hello world
            </div>
        </div>
    	
    	<script> var vm = new Vue({ el: '#app', data:{ activated: "" }, methods:{ handleDivClick: function(){ this.activated = this.activated ==="activated" ? "" : "activated" } } }); </script>

*  **内联style方式绑定**

<div id="app">
            <div :style="styleObj" @click="handleDivClick">
                Hello world
            </div>
        </div>
    	
    	<script> var vm = new Vue({ el: "#app", data: { styleObj:{ clolor: 'black' } }, methods:{ handleDivClick: function(){ this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }); </script>

*  **内联style引用数组形式绑定样式**

<div id="app">
            <div :style="[styleObj,{ fontSize: '20px'}]" @click="handleDivClick">
                Hello world
            </div>
        </div>
    	
    	<script> var vm = new Vue({ el: '#app', data: { styleObj: { color: "black" } }, methods: { handleDivClick: function(){ this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }); </script>

发表评论取消回复

表情：

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

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

相关阅读

相关 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-绑定class样式

1、数组语法我们可以借助于v-bind指令来实现： HTML： <div id="app"> <div v-bind:class="active

喜欢ヅ旅行/ 2023年07月23日 09:56/ 0 赞/ 57 阅读

相关 Vue实现样式绑定

<style type="text/css"> .active{ border:

怼烎@/ 2023年03月14日 08:05/ 0 赞/ 20 阅读

相关 vue样式绑定切换

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue中样式绑定</title> <

我会带着你远行/ 2022年05月25日 13:07/ 0 赞/ 278 阅读

相关 Vue_样式绑定

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

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

相关 Vue.js样式绑定

样式绑定 class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。 v-bind在绑定class和style时，Vue专门增强了它

布满荆棘的人生/ 2022年05月10日 06:34/ 0 赞/ 285 阅读

相关 VUE 样式绑定

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

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

相关 Vue-样式绑定

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

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

相关 Vue - 样式绑定

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

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