Vue.js computed 例子 class与style绑定

最新推荐文章于 2022-10-22 17:46:23 发布
最新推荐文章于 2022-10-22 17:46:23 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： Vue 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunling112/article/details/79013218
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app1">
        <h4>{{fullName}}</h4>
    </div>
    <script>
        var foo = new Vue({
            el: '#app1',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
            },
            //computed 就是计算属性，特别常用  适用于 它的值是通过data数据得到的
            computed: {
                fullName: {                                   //实时计算属性 下面包括要实时计算的属性
                    get: function () {                         //这是一个getter  return出来东西的
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function (newValue) {                     //setter 赋值 
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1]
                    }
                }
            }

        });
        foo.fullName = 'A sun';                          //调用setter赋值
        alert(foo.firstName);
    </script>
</body>
</html>

  
  

   
   

    
    <!DOCTYPE html
    
    >
   
   

   
   

    
    <html 
    
    lang=
    
    "en"
    
    >
   
   

   
   

    
    <head>
   
   

   
   
    
    
    <meta 
    
    charset=
    
    "UTF-8"
    
    >
   
   

   
   
    
    
    <meta 
    
    name=
    
    "viewport" 
    
    content=
    
    "width=device-width, initial-scale=1.0"
    
    >
   
   

   
   
    
    
    <meta 
    
    http-equiv=
    
    "X-UA-Compatible" 
    
    content=
    
    "ie=edge"
    
    >
   
   

   
   
    
    
    <title>vue学习
    
    </title>
   
   

   
   
    
    
    <script 
    
    src=
    
    "https://cdn.jsdelivr.net/npm/vue"
    
    >
    
    <
    
    /script>
   
   

   
   
    
    
    <style>
   
   

   
   
        
    
    .isActive{
   
   

   
   
            
    
    opacity: 
    
    0.5;
   
   

   
   

    
            }
   
   

   
   
        
    
    .color{
   
   

   
   
            
    
    color: 
    
    red;
   
   

   
   
            
    
    font-size: 
    
    24px;
   
   

   
   

    
            }
   
   

   
   
        
    
    .abc{
   
   

   
   
            
    
    background: 
    
    #333333;
   
   

   
   

    
            }
   
   

   
   
    
    
    <
    
    /style>
   
   

   
   

    
    </head>
   
   

   
   

    
    <body>
   
   

   
   
    
    
    <div 
    
    id=
    
    "app1"
    
    >
   
   

   
   
        
    
    <h5 
    
    v-bind:class=
    
    "['isActive','color']" 
    
    class=
    
    "abc"
    
    >sfsdfsd
    
    </h5>        
    
    <!--数组语法 --> 
   
   

   
   
        
    
    <mycomp 
    
    v-bind:class=
    
    "{isActive,color}"
    
    ></mycomp>                       
    
    <!--模版下 绑定class-->
   
   

   
   
        
    
    <h6 
    
    v-bind:style=
    
    "{'font-size':'20px','display': ['-webkit-box', '-ms-flexbox', 'flex']}"
    
    >dfdfdf
    
    </h6>
   
   


   
   
    
    
    </div>
   
   

   
   
    
    
    <script>
   
   

   
   
        
    
    var foo = 
    
    new Vue({
   
   

   
   

    
                el:
    
    '#app1',
   
   

   
   

    
                data:{
   
   

   
   

    
                    isActive:
    
    true,
   
   

   
   

    
                    color:
    
    true,
   
   

   
   

    
                    styleObj:{
   
   

   
   

    
                        color:
    
    'yellow'
   
   

   
   

    
                    }
   
   

   
   

    
                },
   
   

   
   

    
                components:{
   
   

   
   
                
    
    'mycomp':{
   
   

   
   

    
                        template:
    
    '<p class="abc">组件下的class</p>'
   
   

   
   

    
                    }
   
   

   
   

    
                }
   
   

   
   

    
            });
   
   

   
   
    
    
    <
    
    /script>
   
   

   
   

    
    </body>
   
   

   
   

    
    </html>

sunda112
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue总结 有关的表单 组件 事件的处理 自定义指令 class绑定 computed属性和watch属性
xinmenglin的博客
03-05 488
表单绑定 文本 单多选 下拉选择 text radio checkbox select checkbox 单一的条件：选中的值位true否则位false 表单修饰符 .lazy 当change事件触发的时候更新 默认是input事件就会触发试图的更新 .number 把表单的值转化位数据的数值 事件修饰 事件修饰符 *@click.prevent="say()" .stop 停...
Vue.2.0.5实现Class 与 Style 绑定的实例
08-30
在Vue.js 2.0.5中，Class与Style的绑定是通过`v-bind`指令实现的，这使得我们可以根据数据动态地改变元素的样式和类。以下是对这个功能的详细解释： 1. **对象语法**： - `v-bind:class` 接收一个对象，对象的键是...
vue class&style 绑定与computed
seimeii的博客
04-29 879
1. class绑定 <div :class="['el-notification', customClass, horizontalClass]" </div> computed: { typeClass() { return this.type && typeMap[this.type] ? `el-icon-${ typeMap[this.type] }` : ''; }, horizontalClass
vue使用computed动态改变style
GeniusMao的博客
08-11 1862
<template> <div class="boxWrapper" :style="styleVar"> <view class="smallBox" @click="click"> 123 </view> </div> </template> <script> export default { props: { background: { type: String, .
vue.js计算属性(computed)、方法(methods)、侦听属性(watch)的区别与使用场景
foolishbig的博客
12-24 1487
1.计算属性与方法 我们可以像绑定普通属性一样在模板中绑定计算属性。 计算属性是基于它们的依赖进行缓存的。也就是说，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着，上述案例中，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。但是也因此有缺点，某些地方是不能即使进行响应变化。 相反，每当触发重新...
vue.js绑定class
Code_Pupil的博客
03-25 249
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
vue.js学习笔记之绑定style样式和class列表
10-21
与class类似，Vue.js也允许我们使用对象来绑定style属性，这样可以动态地改变元素的样式。对象的属性名是CSS属性名，属性值是应用到元素上的值。例如： ```html <div :style="{ color: activeColor, fontSize: ...
vue.js实现的绑定class操作示例
10-18
首先，我们先了解Vue.js框架中如何通过v-bind指令或者其简写形式(:)来实现动态class绑定。v-bind是Vue.js提供的一个指令，用于将数据绑定到HTML元素或组件上。当与class属性一起使用时，v-bind允许我们根据组件的...
vue计算属性+vue中class与style绑定(推荐)
10-15
Vue.js 是一款流行的前端JavaScript框架，它提供了丰富的功能来帮助开发者构建用户界面。本文将重点探讨Vue中的两个核心特性：计算属性（Computed Properties）以及如何在模板中绑定类（Class）和样式（Style）。...
Vue.js期末总复习
06-28
Vue.js是一款流行的JavaScript框架，用于构建用户界面。下面是Vue.js期末总复习的知识点总结： 1. 在Vue实例中可以定义方法的是methods选项。 在Vue实例中，可以定义方法、数据、计算属性等。methods选项用于定义...
vue：计算属性，监视属性，绑定class样式与style样式，自定义vue实例代码段
最新发布
m0_59588838的博客
10-22 1798
补vue第三肝，快一步前往vue工程之路
Vue中class与style样式绑定
rraxx的博客
03-01 119
Vue中class与style样式绑定 1、class绑定 <style> div{ width: 300px; height: 300px; } .red{ background-color: brown; } .yellow{ background-color: chartreuse; }
vue学习笔记(三)class和style绑定
一只流浪的kk的博客
01-01 253
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数，我们已经更近一步的知道了关于vue的一些知识，本篇博客将进一步探讨vue其它方面的内容，vue中关于class和style绑定，关于class和style我们并不陌生，这个在学习css的时候就是家常便饭了，操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只...
Vue应用（三）---watch、computed、绑定类、绑定样式
hurricane_li的博客
06-18 796
&lt;!-- watch侦听属性，computed计算属性，绑定class，绑定style --&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https://cdn.bootcs
vue中的style,class和计算属性computed
zhangyuea的博客
04-18 6652
class && style class 为什么要绑定类名？ 因为vue是 数据–驱动–》视图 数据–控制–》类名 -->样式 类名 要和 数据 绑定 —使用 —》 v-bind，单向绑定 类名的绑定方式有两种，分别 是对象的方式和数组的方式 A: 对象的形式 <style> .size{ width: 50px; ...
vue的computed,动态class，nextTick简单使用
荤素菜鸟的博客
05-12 1734
**computed的使用** **视图** <p v-for="subject in results" :key="subject"> <span>Marks for: {{ subject.ages }}</span> </p> <p> Total marks are: {{ totalages }} </p> **js** computed:{ totalages:function(){
computed的使用；并且用 computed结合:class 控制元素样式
qq_46302247的博客
12-16 1448
//this.DetailInfo.checkStatus是从接口返回的值，可能为"0","1"，"2" //需求："0"显示黄色圆点,"1"显示绿色圆点,"2"显示红色圆点 <div :class="statusType" class="status" style="margin-right:4px;"></div> //注意： class、style、:class可以同时使用 computed:{ statusType:function(){ .
vue中js常用方法,computed watch,class style绑定,关于数组,axios
Wooo0Ooo的博客
08-23 271
在vue中使用js常用方法 有三种方式 1.写在methds里面 首字母大写 例如:msg.substring(0,1).toUpperCase()+msg.substring(1) 视图部分: <!-- 首字母变大写 --> <h2>{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}</h2> <!-- 点击按钮首字母大写 v-on简写为@--> <input typ.
【Vue】vue基础语法——computed计算、watch监听、class和style，最后回顾JavaScript里面的常用方法（vue学习day03）
09-21 1446
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。:class="{类名：布尔值;}" true 使用 false 不使用。首个被找到的元素在数组中的索引位置;若没有找到则返回-1。用v-bind给标签class设置动态的值。注意：引用数据类型需要添加处理器。
Vue.js 2.0 中的Vuex状态管理与服务端渲染
本书《Vue.js 快速入门与专业应用》由陈陆扬著，深入浅出地介绍了Vue.js的使用和实践，从传统开发角度入手，涵盖数据渲染、事件绑定，直至Vue.js的核心特性，如数据绑定、过滤器、指令和组件。书中还介绍了Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值