vue 02-上计算属性、样式的操作，指令（含自定义,全局和局部）

最新推荐文章于 2024-07-16 09:46:43 发布
最新推荐文章于 2024-07-16 09:46:43 发布
阅读量317 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/sansancn/p/11047451.html
版权

计算属性: 是一个函数,所依赖的元数据变化时，就会再次执行

    典型案例todolist

        computed:{
            计算属性: function(){return 返回值}        使用: {{计算属性}}
        }

        与method的区别: 方法会每次调用，计算属性不会
            计算属性的性能高: 适合做筛选，基于它们的响应式依赖进行缓存的
            方法：适合在列表渲染使用，强制渲染执行


        计算属性：计算属性也可以是个对象
            读取了属性 -> get:fn
            修改了属性 -> set:fn

<body>
  
  <div id="example-5">
    {{ cptStr }}
  </div>

  <script>
    let vm = new Vue({
      el: '#example-5',
      data: {
        str: 'i love you',
      },
      computed:{
        /* cptStr(){
          return this.str.split(' ').reverse().join(' ')
        } */
        cptStr:{
          get: function(){
            console.log('get')
            return this.str.split(' ').reverse().join(' ')
          },
          
          set: function(val){
            this.str = val;
            console.log('set')
          }
        }
      }
    })
  </script>

</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变

2、样式的操作

class操作/style操作:
        v-bind:class="数据|属性|变量|表达式"
              :class/style = " 数据 "     数据类型：字符/对象 / 数组
              :class="{类名:true,类名2:false}"  布尔值决定样式是否使用
              :style="[{css属性名:值},{css属性名小驼峰：值}]"

<body>

    <div id="app">

      <!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
      <!-- class动态绑定 -->
      <h4>class动态绑定</h4>

      <a class="btn btn-primary" href="#">按钮1</a>
      <a href="#" :class="cl1">按钮2</a>
      <!-- <a :class=" cl1 " href="#">按钮2</a> -->
      <a :class=" 'btn btn-primary' " href="#">按钮3</a>
      <a :class=" {btn:false,'btn-primary':true} " href="#">按钮4</a>
      <a :class=" [{btn:false},{'btn-primary':true}] " href="#">按钮5</a>

      <!-- style动态绑定 -->
      <h4>style动态绑定</h4>
      <!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
      <a class="btn btn-primary" :style=" 'background:red' " href="#">按钮1</a>
      <!-- <a class="btn btn-primary" :style=" {background:'red',height:'50px'} " href="#">按钮2</a> -->
      <!-- <a class="btn btn-primary" :style=" [{background:'red'},{height:'50px',width:'120px'}] " href="#">按钮3</a> -->

    </div>

    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          cl1:'btn btn-primary'
        }
        
      })
    </script>
      
  </body>

3、指令

指令:  扩展了html语法功能,区别了普通的html属性
        vue自带的指令:   v-text/v-html/v-bind/v-for/v-model/v-on

                v-show="布尔"             v-if="布尔"
        区别: 操作css                   操作dom
        场景: 适合频繁切换          适合不频繁切换
        性能: 初始渲染消耗          频繁切换回有消耗
    
    其他指令: https://cn.vuejs.org/v2/api/#指令

    指令(directive):
        v-text/v-html/v-bind/v-on/v-model/v-for/v-if/v-show/v-else/v-else-if

    自定义指令: 指令是个函数|对象,用来操作dom的, 里面的this 返回window

        a)全局:   Vue.directive('指令名不带v-',函数(el,binding))
            el == 使用指令的DOM元素
            binding 是个对象 含有传入的 参数(binding.value)
        b)局部:  定义在选项里面
            directives:{
                指令名不带v- : 函数(el,binding){}
            }
<body>
    <div id="app">

      <div v-color>box</div>
      <div v-color=" colorValue ">box2</div>
      <div v-color=" 'yellow' ">box3</div>
      
    </div>

    <script>

      Vue.directive('color',function(el,binding){
        // console.log('指令运行',el,binding) //el== dom元素  binding == 指令信息，传入的值等
        console.log('指令运行',this);//指令函数内部的  this指向window

        el.style.background=binding.value|| 'red';
        // $(el).css('background',binding.value|| 'red');

      })

      Vue.directive('color',function(el,binding){
        el.style.background=binding.value||'green';
      })

      let vm = new Vue({
        el: '#app',
        data: {
          colorValue:'blue'
        }
        
      })
    </script>
      
  </body>
局部指令
<body>

    <div id="app">

      <div v-color>box</div>
      <div v-color=" colorValue ">box2</div>
      <div v-color=" 'yellow' ">box3</div>
      
    </div>

    <script>

      /* Vue.directive('color',function(el,binding){
        // console.log('指令运行',el,binding) //el== dom元素  binding == 指令信息，传入的值等
        console.log('指令运行',this);//指令函数内部的  this指向window

        el.style.background=binding.value|| 'red';
        // $(el).css('background',binding.value|| 'red');

      }) */

      let vm = new Vue({
        el: '#app',
        data: {
          colorValue:'blue'
        },
        directives: {
          color:function(el,binding){
            console.log('指令运行',this);//指令函数内部的  this指向window
            el.style.background=binding.value|| 'red';
          }
          
        }
        
      })
    </script>
      
  </body>

全局和局部的差异

<body>

    <div id="app">

      <div v-color>box</div>
      <div v-color=" colorValue ">box2</div>
      <div v-color=" 'yellow' ">box3</div>
      
    </div>
    <hr>
    <div id="app2">

        <div v-color>box</div>
        <div v-color=" colorValue ">box2</div>
        <div v-color=" 'yellow' ">box3</div>
        
      </div>

    <script>

      /* Vue.directive('color',function(el,binding){
        // console.log('指令运行',el,binding) //el== dom元素  binding == 指令信息，传入的值等
        console.log('指令运行',this);//指令函数内部的  this指向window

        el.style.background=binding.value|| 'red';
        // $(el).css('background',binding.value|| 'red');

      }) */

      let vm = new Vue({
        el: '#app',
        data: {
          colorValue:'blue'
        },
        directives: {
          color:function(el,binding){
            console.log('指令运行',this);//指令函数内部的  this指向window
            el.style.background=binding.value|| 'red';
          }
          
        }
        
      })

      let vm2 = new Vue({
        el: '#app2',
        data: {
          colorValue:'blue'
        },
        /* directives: {
          color:function(el,binding){
            console.log('指令运行',this);//指令函数内部的  this指向window
            el.style.background=binding.value|| 'red';
          }
          
        } */
        
      })
    </script>
      
  </body>
把全局函数注释掉后发现app2不能用了，因为局部函数只能影响当时在的一部分会报错
    <pre>
        vue.js:634 [Vue warn]: Failed to resolve directive: color

        (found in <Anonymous>)
    </pre>

转载于:https://www.cnblogs.com/sansancn/p/11047451.html

Vue的计算属性和样式绑定
qq_45962090的博客
10-30 1244
目录一、计算属性1.1 概述及作用1.2 为何需要用到计算属性？1.3 computed与methods的区别1.4 computed setter二、样式绑定2.1 class 属性绑定2.1.1 绑定单个class2.1.2 绑定多个class2.1.3 绑定class对象2.1.4 绑定class数组2.2 绑定内联样式(style)2.2.1 直接设置样式2.2.2 绑定样式对象2.2.3 绑定多个样式对象 一、计算属性 1.1 概述及作用 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的
vue：绑定样式，计算属性，自定义指令，过滤器
weixin_42931345的博客
05-19 708
一、绑定样式 1.1 绑定style内联样式：2种： 1、将整个style属性值当做一个大的字符串去绑定。 问题：如果使用style绑定样式，说明经常会单独修改一个样css属性值。而如果style是一个字符串，非常不便于程序仅修改其中一个css属性。 解决：style支持对象形式绑定 2、以***对象形式绑定*** style，2步： ① 在data中定义一个内嵌对象结构，保存style中每个css属性。 比如：希望div#pop的位置上下左右变化，可定义对象： data:{ left:"100px",
Vue计算属性及样式绑定
m0_52942098的博客
07-08 798
vue学习（二）
vue.js--计算属性&样式绑定
czx3387170的博客
11-28 1081
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。 例：反转字符串： &lt;div id="app"&gt; &lt;p&gt;原始字符串: {{ message }}&lt;/p&gt; &lt;p&gt;计算后反转字符串: {{ reversedMessage }}&lt;/p&gt; &lt;/div&gt; &lt;script&a
Vue的计算属性
qq_63608386的博客
08-28 1316
vue计算属性
过滤器 filters(全局) 计算属性
qq_48930299的博客
06-02 244
<template> <div> <div>{{ i }}</div> <button @click="i++">+</button> <button @click="add">追加</button> <hr /> <div>{{ msg | time|hh }}</div> <div>{{ msg2 }}&lt
vue自定义指令和计算属性
缚己
01-24 552
自定义指令 Vue 自带的指令无法满足开发需求，这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive 方法定义，局部指令在 Vue 实例中设置 directives 属性。 如下代码所示： // 注册为全局指令 Vue.directive('focus', { inserted: function (el) { // 获取焦点事件 el.focus() } }) // 注册为局部指令 let vm =
Vue02基础语法-插值+过滤器+计算属性+计算属性
全栈
10-17 660
努力是为了不平庸~Vue.js 使用了的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。1.1 插值。
2021-08-16 vue笔记-基础(三) 计算属性和监听属性,methods,过滤器,自定义指令,生命周期
GAARA
08-16 177
1.computed的用法 例子: {{msg}} {{num}} {{fn()}} {{computedNum}} new Vue({ el:"#app", data:{ msg:"双击", num:6 }, methods:{ fn(){
自定义指令：Vue允许注册全局或组件级的自定义指令，以实现对常规DOM元素的复杂操作
哎 你看的博客
06-05 1326
简介 Vue自定义指令的概念 自定义指令的用途和好处 Vue自定义指令的基本概念和语法 注册自定义指令的方法 自定义指令的结构和参数 全局自定义指令 如何注册全局自定义指令 全局自定义指令的使用示例 全局自定义指令的应用场景 组件级别的自定义指令 如何注册组件级自定义指令 组件级别自定义指令的使用示例 组件级自定义指令的应用场景 对常规DOM元素的复杂操作 如何用自定义指令来操控DOM元素 使用自定义指令进行常见复杂操作的示例，如修改样式、添加事件监听等 自定义指令的优点和局限性 自定义指令的优势和适用场景
vue面试题目-vue经典面试题目-vue-Vue框架的核心概念-常用的功能和特性-性能优化-面试题目-面经
01-20
Vue的混入（Mixin）用于复用组件间的方法和选项，通过`Vue.mixin()`全局应用，或在组件选项中局部应用。 Vue插件是扩展Vue功能的机制，通过`Vue.use()`安装。开发插件通常涉及全局方法、指令、过滤器等的注册。 ...
vue自定义全局指令, 计算属性computed, 侦听器watch, 过滤器filter
weixin_44283585的博客
07-03 1477
自定义指令 内置指令不能满足或者不方便操作时,vue也允许注册自定义指令, 对普通DOM进行底层操作时, 会使用到自定义指令绑定到元素上执行相关操作 自定义指令分为 全局指令 和 局部指令 , 同时存在时以局部指令为准(局部优先级高) 自定义指令常用的钩子函数: — tip: 自定义指令中不能直接操作vue中的数据和方法,也就是自定义指令中的this不是vue对象 bind — 第一次绑定到元素时调用 update — 数据更新时调用(指令绑定元素更新时调用,可能在其子元素更新前调用) inserted
Vue——计算属性
AYBBZXY的博客
01-21 1746
文章目录计算属性computed 计算属性 vs methods 方法计算属性完整写法综合案例：成绩案例 计算属性 概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算 语法: ①声明computed配置项中，一个计算属性对应一个函数 ②使用起来和普通属性一样使用{{ 计算属性名 }} (平时声明属性是往data中放的，现在要往对应的computed中放👇) <script> computed:{ 计算属性名 () { 基于现有数据，编写求职逻辑 return 结
vue的计算属性
weixin_52455405的博客
02-09 623
computed 在computed中，当有人读取fullName时，get就会被调用，且返回值就是sum的属性值； get什么时候调用？1、初次读取fullName时；2、所依赖的数据发生变化时，这个地方就是指this.firstName和this.lastName. set什么时候调用？1、当fullName被修改时。 如： data:{ firstName:张, lastName:三 }, computed:{ fullName:{ get(){ ret
vue-计算属性
hjy170314的博客
10-22 329
计算属性：              数据一般都是存储在data对象中，但是如果我们想要对这个data数据进行处理，然后显示处理后的数据，但是又由于其他地方可能还在引用数据原来的样子，如果我们直接在data里处理，就会导致所有使用该数据的节点全部发生变化。另外，通过在插值表示式中，写处理则会导致大量重复的代码，而且差值表达式之中是不可以写复杂运算，这时就需要用到计算属性。           ...
vue计算属性详解
高宇辰
07-27 257
写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用data() {return {firstName : "熊" , lastName : "大" , };get() {exportdata() {return {firstName : "熊" , lastName : "大" , };get() {defaultdata() {return {firstName : "熊" , lastName : "大" , };get() {
Vue-computed 计算属性
SevenSongyun的博客
12-22 219
Vue-computed 计算属性 一、说明 计算属性，其实是一个属性，但需要通过方法来返回其值，返回的结果即该属性的值 二、注意 在使用该属性的时候，与data中的属性一样，直接写【属性名】即可 计算属性会被缓存：第一次调用该属性时，会调用方法该方法，返回该值的结果，而后如果该属性依赖的其他属性中没有改变，则会从缓存中取该属性。每当该属性依赖的属性中有被修改的，则会调用方法，重新返回一个新的...
Vue计算属性（computed）的使用方法及使用场景总结
最新发布
weixin_51080551的博客
07-16 6426
计算属性能够提高性能并简化代码结构。适当地使用计算属性，可以使代码更加清晰、简洁和高效。
Vue - 计算属性
热门推荐
小海的博客
11-01 5万+
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同 注意2: 函数内变量变化, 会自动重新计算结果返回 例子: 需求: 需求1: 求2个数的和显示到页面上 需求2: 字符串翻转 <template> &l
Vue自定义v-bind:style指令详解及实战应用
自定义指令则是Vue中一种扩展其功能的方式，允许开发者创建并实现自定义的行为逻辑，特别是在需要对底层DOM元素进行复杂操作的时候。本文将详细介绍如何在Vue中使用自定义指令，特别是针对`v-bind:style` 的应用。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值