Vue 样式绑定 对象语法 数组语法 对象数组一起使用

最新推荐文章于 2022-07-18 16:39:19 发布
最新推荐文章于 2022-07-18 16:39:19 发布
阅读量416 收藏
点赞数 1
分类专栏： 前端 文章标签： 对象语法 数组语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37767455/article/details/102387813
版权

一、对象语法
1.代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-3.3.1.js"></script>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>

    <div id="app">
       <div @Click="handleDivClick"
            :class="{activated: isActivated}" >
            What do you mean?
       </div>
    </div>

    <script>
        /*MVVM
        M层:data数据    V层:div展示的视图
        VM层（我们无需实现）:Vue即是VM层

        Vue监听到数据变了，就帮我们改变视图层

        Vue也能在视图层监听到一些事件触发，
        然后通过VM这一层来调用我们写的逻辑代码(比如methods里面的)
        从而又改变了M层的数据

        这样的好处:我们只需关注M层，对数据进行处理
         */

        var vm=new Vue({
            el:'#app',  
            data:{
                isActivated:false
            },
            methods:{
                handleDivClick:function(){
                    this.isActivated=!this.isActivated;
                }
            }
        });


    </script>
</body>

2.效果截图
在这里插入图片描述
点击一下后：
在这里插入图片描述
二、数组语法
1、代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-3.3.1.js"></script>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- :class 和一个数组绑定,数组里面的内容是一个变量
                    class上会显示这个变量对应的内容-->
       <div @Click="handleDivClick"
            :class="[activated,activatedOne]">
            What do you mean?
       </div>
    </div>

    <script>
      
        var vm=new Vue({
            el:'#app',  
            data:{
                activated:"",
                activatedOne:"activated-one"
            },
            methods:{
                handleDivClick:function(){
                    this.activated = this.activated === "activated" ?
                        "" : "activated"
                }
            }
        });

    </script>
</body>

2.效果截图
在这里插入图片描述
点击一下后：
在这里插入图片描述
三、对象数组
1.代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-3.3.1.js"></script>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        <!--和数组绑定  :style="[styleObj,{frontSize:'20px'}]"
            和一个对象绑定  :style="styleObj" 
            :style 出现了冒号 这说明它是个指令, 所以:style后面的styleObj一定是个数据项
                    -->
       <div :style="[styleObj,{fontSize:'20px'}]"
            @Click="handleDivClick">
            What do you mean?
       </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>
</body>

2.效果截图
在这里插入图片描述
点击一下后：
在这里插入图片描述

Take^that
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习（五）【vue样式绑定：对象或数组】
小卜妞的博客
03-21 3278
点击改变文字颜色 通过class对象绑定和class数组绑定，可以实现vue的样式绑定。在页面中检查dom元素，看点击测试文本时，dom中是否会出现class名，然后在style中定义的一些样式就可以动态的作用到dom上了。 第一种：class的对象绑定 <!--数据双向绑定的实例--> <!DOCTYPE html> <html lang="en">...
vue.js-class样式绑定中对象语法跟数组语法可以混合使用
qq_40161158的博客
03-18 297
Vue 测试 ![运行结果](https://img-blog.csdnimg.cn/20200318161612376.png)
24Vue - 绑定内联样式（对象语法)
阿甘兄
07-26 439
v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）： <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { ...
vue数组语法兼容问题
09-16 137
先来一行代码： <a :href="['NewsNote.asp?ID='+item.ID+'&MenuType=C']" v-text="item.Title"></a> 在非IE浏览器测试数组语法 数据渲染完全没问题 在IE9测试数组语法 渲染变成了[object] 解决方法改变一下写法就行 把数组语法最...
15.样式绑定之class绑定数组用法
code_dream_wq的博客
11-26 1114
v-bind 中支持绑定一个数组 数组中activeClass和 errorClass对应为data中的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 1px solid...
Vue.js绑定HTML class数组语法错误的原因分析
11-28
在1.0.19+中，可以在数组语法中使用对象语法： 如果这样写是可以执行成功的，但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC: false } <div :class="[classA, { ...
vue踩坑记录之数组定义和赋值问题
10-17
1. **避免直接通过索引赋值**：由于Vue无法检测到通过索引直接修改数组的操作，应避免使用`array[index] = value`这样的语法。 2. **使用数组方法**：可以使用`push`、`pop`、`shift`、`unshift`、`splice`、`sort`...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Vue 样式绑定的实现方法
12-11
学习 Vue 的时候觉得样式绑定很简单，但是使用的时候总是容易搞晕自己。因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的。这篇文章就简单对 Vue 绑定做个总结。 操作元素的class列表...
v-bind绑定style样式（数组语法）
qq_45780380的博客
03-02 174
v-bind绑定style样式（数组语法） 话不多说直接上代码 <body> <div id="app"> <h2 v-bind:style="[basestyle,baseStyle1]">{{message}}</h2> </div> <script> const app=new Vue({ el:'#app', data:{ message:'你好啊',
对象与对象引用的区别
weixin_46402869的博客
10-03 517
对象与对象引用的区别 直接举例子吧，从例子中更容易理解对象与对象引用的区别 先建立一个Demo类，用于后面的分析。 public class Demo{ //默认构造方法 public Demo{ } } 接下来，我们用Demo类来创建一个对象。 Demo demo=new Demo(); 这一条语句，其实包括了四个动作： 1）右边的“new Demo”，是以Demo类为模板，在堆空间里创建一个Demo对象。 2）末尾的()意味着，在对象创建后，立即调用Demo类的构造函数，对
Vue动态绑定class属性的5种方法：
weixin_46753476的博客
07-18 2186
Vue动态绑定class属性的5种方法：
vue中常用的数组方法
真真的博客
07-28 4111
Vue中常用的数组方法 .filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every() .filter() .map() .forEach() .find() .findIndex() .some() .every() .filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 是否改变原数组：否 是否对空数组进行检测：否 语法： const arr= [32, 33
2020-09-29 vue学习笔记——class与style绑定（对象语法、数组语法、用在组件上）
qq_46580089的博客
09-29 254
class与style绑定（用在组件上） class除了绑定在html上，还可以绑定在组件上。当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。 <div id="app"> <alertmsg :class="classObj"></alertmsg> //这里的class是加给了template中的根元素。 </div> Vue.co
vue学习五(绑定class、v-bind:style(对象语法、数组语法))
全干工程师
09-27 7464
文章目录绑定 HTML Class内联样式在模板里内联样式不在模板里绑定返回对象的计算属性数组语法class 列表class 列表使用三元表达式class 列表使用对象语法用在组件上绑定内联样式v-bind:style 绑定 HTML Class 我们可以传给 v-bind:class 一个对象，以动态地切换 class： 内联样式在模板里 &amp;amp;lt;div id=&amp;quot;div1&amp;quot; :class=&amp;quot;{...
vue动态绑定class的3种方式对象语法和数组语法
weixin_34332905的博客
12-02 1278
动态绑定class的几种方式 1.对象语法 行内或计算属性 <style> .static { width: 100px; height: 100px; background-color: #ccc; } .orange { border: 1px solid orange; } </style&...
Vue- 对象语法 v-bind:class与对象语法的使用（重要）
heartOfblack 离开了电脑，我不希望我还有病
02-28 3万+
我们可以传给 v-bind:class 一个对象，以动态地切换 class 。 div v-bind:class="{ active: isActive }">div>//对象语法也就是在v-bind:class绑定一个对象的时候，里面的值将影响最终取值，//比如如果 这里isActive的值为true 则会被渲染成class='active' 如果为false , 则
vue数组操作
热门推荐
草木黄尘
08-27 8万+
vue中数组的操作总结： 一、根据索引设置元素： 1、调用$set方法：this.arr.$set(index, val);2、调用splice方法：this.arr.splice(index, 1, val);二、合并数组：this.arr = this.arr.concat(anotherArr);三、清空数组：this.arr = [];四、主要的数组方法： 1、变异方法（修改了原始数组
vue 数组语法(动态绑定class)
qq_49267744的博客
07-26 3273
数组语法 我们可以把一个数组传给 :class，以应用一个 class 列表： <div :class="[activeClass, errorClass]"></div> data() { return { activeClass: 'active', errorClass: 'text-danger' } } 渲染的结果为： <div class="active text-danger"></div> 如果你想根据条件切换列表中
vue 动态绑定 二维数组
最新发布
11-29
在动态绑定二维数组时，可以使用类似于引用中的语法来绑定数组中的元素。具体实现步骤如下： 1. 在Vue实例中定义一个二维数组，例如： ```javascript data() { return { myArray: [ [1, 2, 3], [4, 5, 6], [7,...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值