vue基础-动态class、动态style、vue过滤器、vue计算属性vue基础-动态class、动态style、vue过滤器、vue计算属性

vue基础-动态class、动态style、vue过滤器、vue计算属性

文章目录

vue基础-动态class、动态style、vue过滤器、vue计算属性

vue基础-动态class

使用v-bind给标签class设置动态的值

语法：

:class=“{类名:布尔值}”

<style>
      .red_str {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 
         :class="{类名:布尔值}"
         场景:  vue 变量控制标签是否应该有类名
       -->
      <p :class="{'red_str':bool}">动态class</p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        bool: true,
      },
    })
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

vue基础-动态style

给标签动态设置style的值

语法:

:style=“{css属性:值}”

  <body>
    <div id="app">
      <!-- 

        语法:

:style="{css属性:值}"
       -->

      <p :style="{backgroundColor:colorStr,color:str,border:borStr}">
        动态style
      </p>

      <p :style="{'background-color':colorStr,color:str,border:borStr}">
        动态style
      </p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        colorStr: 'red',
        str: '#fff',
        borStr: '5px solid blue',
      },
    })
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

vue过滤器

定义使用

转换格式，过滤器就是一个函数，传入值返回处理后的值

过滤器只能用在 插值表达式和v-bind 表达式

场景：

字母转大写：输入 hello 输出 ‘HELLO’
字符串翻转输入’hello world’ 输出 ’dlrow olleh‘
时间戳转换为时间日期格式

语法：

全局： Vue.filter(‘过滤器名’,(值)=>{return 返回处理后的值})
局部: filters:(过滤器名字,(值)=>{return 返回处理后的值})

<body>
    <div id="app">
      <p>原来的样子:{{msg}}</p>
      <!-- 
        2:过滤器使用
        语法：  {{值|过滤器名字}}
       -->
      <p>{{msg | toUp}}</p>
      <p>{{msg | reverse}}</p>
    </div>
    <hr />

    <div id="main">
      {{str }}
      <p>{{str | reverse}}</p>
    </div>
  </body>
  <script>
    // 全局过滤器 任何一个vue文件中都可以使用
    /* 
    Vue.filter("过滤器的名字",(val)=>{return 处理后的值})
    */
    Vue.filter('reverse', (val) => {
      return val.split('').reverse().join('')
    })

    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
      },
      // 局部--局部--过滤器
      // 只能在当前vue文件(vue实例)中使用
      /* 
        filters:{
          过滤器1(val){
            return 处理后的值
          },
          过滤器2(val){
            return 处理后的值
          }
        }
      */
      filters: {
        toUp(val) {
          return val.toUpperCase()
        },
      },
    })

    // ---------------------------
    var aa = new Vue({
      el: '#main',
      data: {
        str: 'good bye',
      },
    })
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

传参和多过滤器

可同时使用多个过滤器，或给过滤器传参

语法:

过滤器传参 vue变量 | 过滤器(实参)
多个过滤器 vue变量|过滤器1|过滤器2


    
      原来的样子{{msg}}
      
      翻转过滤器{{msg | reverse("-")}}
      
      {{msg|toUp|reverse("|")}}

      鼠标停留
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vue计算属性

computed

一个数据依赖另外一些数据计算而来的结果

(一个变量，值要通过计算得到，变量要在computed中定义)

语法:

computed:{
    '计算属性名'(){
        return 值
    }
}
1
2
3
4
5

代码

vue计算属性–缓存

计算属性基于他们的依赖项的值结果进行缓存的，只要依赖的变量不变，都直接从缓存取结果

请添加图片描述

 
    
      {{reverseMessage}}
      {{reverseMessage}}
      {{reverseMessage}}
      {{getMessage()}}
      {{getMessage()}}
      {{getMessage()}}
    
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

计算属性-完整写法

计算属性也是变量，如果想要直接赋值，需要使用完整写法

语法:

computed：{
    ‘属性名’:{
        set(值){
            
        },
        get(){
            
        }
    }
}
1
2
3
4
5
6
7
8
9
10

需求:

计算属性给v-model使用

相关阅读:
基于Python实现的黑白棋强化学习模型
跟着蚂蚁高级专家学架构：Netty+RabbitMQ+Docker+虚拟机并发编程
算法刷题-链表
Bean注解总结
Mongo
盗卖上亿条公民个人信息，“安全刺客”怎么防？
基于Advisor实现AOP
Java --- Spring6之Set方法注入
使用composer开发自己的扩展包
算法---树状数组

原文地址：https://blog.csdn.net/idiot_MAN/article/details/126943339