精华内容
下载资源
问答
  • Vue 中使用 vue-class-component 与 vue-property-decorator 在 Vue 的 V2.X 版本中使用 TypeScript 时,推荐使用基于类的注解装饰器进行开发。 1. 安装相关 vue-property-decorator 基于 vue-class-component ...

    在 Vue 中使用 vue-class-component 与 vue-property-decorator


    在 Vue 的 V2.X 版本中使用 TypeScript 时,推荐使用基于类的注解装饰器进行开发。


    1. 安装相关

    vue-property-decorator 基于 vue-class-component 开发而成,所以安装时仅需安装 vue-property-decorator 即可。

    npm i vue-property-decorator
    

    2. 使用相关

    vue-class-component 提供(本文截至 V7.1.0):

    • methods 可以直接声明为类的成员方法
    • 计算属性可以被声明为类的属性访问器
    • 初始化的 data 可以被声明为类属性
    • datarender 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法
    • 所有其他属性,需要放在装饰器中

    vue-property-decorator 提供(本文截至 V8.1.1):

    • @Prop
    • @Model
    • @Watch
    • @Inject@Provide
    • @Emit

    更详细的使用参见:


    3. 注意 undefined 初始化的 data

    vue-class-component 并不会使初始化为 undefineddata 变的响应式,应当使用 null 初始化或者 data 钩子。

    详细可参考:

    展开全文
  • vue中class的用法

    千次阅读 2018-03-27 11:49:03
    最近学习了vue中classclass的用法,想来总结一下,也把我的知识提供给大家使用;首先来总结class的用法,vue中class有4种写法;class和style都属于DOM属性,所以在vue中都用:class和:style表示<style&...

    最近学习了vue中class和class的用法,想来总结一下,也把我的知识提供给大家使用;首先来总结class的用法,vue中的class有4种写法;class和style都属于DOM属性,所以在vue中都用:class和:style表示

    <style>

      .red{color:red;}

      .blue{background-color:blue;}

    </style>

    想给id为box的元素加上这些样式

    方法一

    <div id="box">
      <strong :class="[reds,blues]"> 凉凉三生三世,为你四年成河水<strong>   
    </div>
    引入vue.js文件是必须的(自行引入)
    <script>
      new Vue({
        el:"#box",
        data:{
            reds:"red",   //此处的red和blue指的是style中的red类和blue类
           blues:"blue"
        }
      });
    </script>
    结果是id为box的div字体和红色,背景为蓝色
     
    方法二
     
    <div id="box">
      <strong :class="{red:true,blue:false}">凉凉三生三世,为你四年成河水<strong>   
    </div>
    <script>
      new Vue({
        el:"#box",
        data:{}
      });
    </script>
    结果是id为box的div的字体颜色为红色,背景色不为蓝色
     
    方法三
    <div id="box">
      <strong :class="json">凉凉三生三世,为你四年成河水<strong>   
    </div>
    <script>
      new Vue({
        el:"#box",
        data:{  //把属性都放在一个对象里面
          json:{
            red:false,
            blue:true
          }
        }
      });
    </script>
    结果是id为box的div的字体颜色为默认颜色,背景色为蓝色
     
    方法四
    <div id="box">
      <strong :class="{red:a,bule:b}">凉凉三生三世,为你四年成河水<strong>   
    </div>
    <script>
      new Vue({
        el:"#box",
        data:{  
          a:true,
          b:false
        }
      });
    </script>
    结果是id为box的div的字体为红色,背景色 不为蓝色
    原文地址:https://www.cnblogs.com/yuershuo/p/6861951.html
    展开全文
  • vue-class-component是一个支持es6 class风格来开发组件的vue官方库,并使vue组件可以使用继承、混入等特性。 // App.vue <script> import Vue from 'vue' import Component from 'vue-class-component' @...

    vue-class-component

    vue-class-component是一个支持es6 class风格来开发组件的vue官方库,并使vue组件可以使用继承、混入等特性。

    // App.vue
    <script>
    import Vue from 'vue'
    import Component from 'vue-class-component'
     
    @Component({
      props: {
        propMessage: String
      }
    })
    export default class App extends Vue {
      // initial data
      msg = 123
     
      // use prop values for initial data
      helloMsg = 'Hello, ' + this.propMessage
     
      // lifecycle hook
      mounted () {
        this.greet()
      }
     
      // computed
      get computedMsg () {
        return 'computed ' + this.msg
      }
     
      // method
      greet () {
        alert('greeting: ' + this.msg)
      }
    }
    </script>
    
    // main.js
    import App from './App.vue'
    
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    })
    
    

    在这个例子中,很容易发现几个疑点:

    1. App类居然没有constructor构造函数;

    2. 导出的类居然没有被new就直接使用了。

    3. msg=123,这是什么语法?

    这里摘取自知乎某位大佬的一篇文章,里面有详细的解释,以及源码实现,不做过多解释。【源码探秘】vue-class-component

    vue-property-decorator

    vue-property-decorator是基于vue-class-component扩展的一个非官方库, 主要功能就和名字一样,为vue的属性提供装饰器写法,让代码更加美观、直白。
    主要提供了以下装饰器和一个mixin方法:

    • @Prop
    • @PropSync
    • @Model
    • @Watch
    • @Provide
    • @Inject
    • @ProvideReactive
    • @InjectReactive
    • @Emit
    • @Ref
    • @Component (provided by vue-class-component)
    • Mixins (the helper function named mixins provided by vue-class-component)

    @Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

    import { Vue, Component, Prop } from 'vue-property-decorator'
     
    @Component
    export default class YourComponent extends Vue {
      @Prop(Number) propA
      @Prop({ default: 'default value', type: Number }) propB
      @Prop([String, Boolean]) propC
    

    解析后

    export default {
      props: {
        propA: {
          type: Number,
        },
        propB: {
          default: 'default value',
          type: Number
        },
        propC: {
          type: [String, Boolean],
        },
      },
    }
    

    到这里可以发现,上一个案例中Vue、Component 也可以通过 vue-property-decorator 引入。

    @PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

    import { Vue, Component, PropSync } from 'vue-property-decorator'
     
    @Component
    export default class YourComponent extends Vue {
      @PropSync('name', { type: String }) syncedName
    }
    

    解析后

    export default {
      props: {
        name: {
          type: String,
        },
      },
      computed: {
        syncedName: {
          get() {
            return this.name
          },
          set(value) {
            this.$emit('update:name', value)
          },
        },
      },
    }
    

    @Model(event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) decorator

    import { Vue, Component, Model } from 'vue-property-decorator'
     
    @Component
    export default class YourComponent extends Vue {
      @Model('change', { type: Boolean }) checked
    }
    

    解析后

    export default {
      model: {
        prop: 'checked',
        event: 'change',
      },
      props: {
        checked: {
          type: Boolean,
        },
      },
    }
    

    自定义v-model,Vue组件提供 model: { prop?: string, event?: string } 让我们可以定制prop和event。默认情况下,一个组件上的v-model 会把 value用作 prop且把 input用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

    • 下面是Vue官网的例子
    Vue.component('my-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        }, 
        props: {    // this allows using the `value` prop for a different purpose  
            value: String,
            checked: { // use `checked` as the prop which take the place of `value`
                type: Number, default: 0
            }
        }, 
        methods: {
            isChange() {
                this.$emit('change', val);
            },
        }
    })
    
    <template>
      <my-checkbox v-model="foo" value="some value"></my-checkbox>
    </template>
    

    上述代码相当于:

    <template>
      <my-checkbox  :checked="foo"  @change="val => { foo = val }"  value="some value" />
    </template>
    

    @Watch(path: string, options: WatchOptions = {}) decorator

    import { Vue, Component, Watch } from 'vue-property-decorator'
     
    @Component
    export default class YourComponent extends Vue {
      @Watch('child')
      onChildChanged(val, oldVal) {}
     
      @Watch('person', { immediate: true, deep: true })
      onPersonChanged1(val, oldVal) {}
     
      @Watch('person')
      onPersonChanged2(val, oldVal) {}
    }
    
    

    解析后

    export default {
      watch: {
        child: [
          {
            handler: 'onChildChanged',
            immediate: false,
            deep: false,
          },
        ],
        person: [  // 这里需要明白的是watch可以接受多个处理函数
          {
            handler: 'onPersonChanged1',
            immediate: true,
            deep: true,
          },
          {
            handler: 'onPersonChanged2',
            immediate: false,
            deep: false,
          },
        ],
      },
      methods: {
        onChildChanged(val, oldVal) {},
        onPersonChanged1(val, oldVal) {},
        onPersonChanged2(val, oldVal) {},
      },
    }
    
    

    @Provide(key?: string | symbol) / @Inject(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

    import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
     
    const symbol = Symbol('baz')
     
    @Component
    export class MyComponent extends Vue {
      @Inject() foo
      @Inject('bar') bar
      @Inject({ from: 'optional', default: 'default' }) optional
      @Inject(symbol) baz
     
      @Provide() foo = 'foo'
      @Provide('bar') baz = 'bar'
    }
    

    解析后

    const symbol = Symbol('baz')
     
    export const MyComponent = Vue.extend({
      inject: {
        foo: 'foo',
        bar: 'bar',
        optional: { from: 'optional', default: 'default' },
        baz: symbol,
      },
      data() {
        return {
          foo: 'foo',
          baz: 'bar',
        }
      },
      provide() {
        return {
          foo: this.foo,
          bar: this.baz,
        }
      },
    })
    

    注意:vue官方说provide/inject不是响应式的,但是是对基础类型而言,如果提供的值是一个对象是可以监听到的。原因官方没说,猜测是provide的只是对象的引用地址,而不是拷贝一个新对象,所以修改值的时候就会变成响应式。

    @ProvideReactive(key?: string | symbol) / @InjectReactive(options?: { from?: InjectKey, default?: any } | InjectKey) decorator

    const key = Symbol()
    @Component
    class ParentComponent extends Vue {
      @ProvideReactive() one = 'value'
      @ProvideReactive(key) two = 'value'
    }
     
    @Component
    class ChildComponent extends Vue {
      @InjectReactive() one!: string
      @InjectReactive(key) two!: string
    }
    

    这两个修饰器是@Provide 和 @Inject 的响应式版本。所有被提供的值能实现双向绑定。

    @Emit(event?: string) decorator

    import { Vue, Component, Emit } from 'vue-property-decorator'
     
    @Component
    export default class YourComponent extends Vue {
      count = 0
     
      @Emit()
      addToCount(n) {
        this.count += n
      }
     
      @Emit('reset')
      resetCount() {
        this.count = 0
      }
     
      @Emit()
      returnValue() {
        return 10
      }
     
      @Emit()
      onInputChange(e) {
        return e.target.value
      }
     
      @Emit()
      promise() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve(20)
          }, 0)
        })
      }
    }
    

    解析后

    export default {
      data() {
        return {
          count: 0,
        }
      },
      methods: {
        addToCount(n) {
          this.count += n
          this.$emit('add-to-count', n)
        },
        resetCount() {
          this.count = 0
          this.$emit('reset')
        },
        returnValue() {
          this.$emit('return-value', 10)
        },
        onInputChange(e) {
          this.$emit('on-input-change', e.target.value, e)
        },
        promise() {
          const promise = new Promise((resolve) => {
            setTimeout(() => {
              resolve(20)
            }, 0)
          })
     
          promise.then((value) => {
            this.$emit('promise', value)
          })
        },
      },
    }
    

    $emit 装饰的函数,它们的返回值后面跟着它们的原始参数。如果返回值是一个Promise对象,则会在触发前达到完成状态。

    如果事件名称不提供 event 参数,函数名将会被代替使用。 在这种情况下,,驼峰命名将被转换成短横线隔开式命名。

    @Ref(refKey?: string) decorator

    import { Vue, Component, Ref } from 'vue-property-decorator'
     
    import AnotherComponent from '@/path/to/another-component.vue'
     
    @Component
    export default class YourComponent extends Vue {
      @Ref() readonly anotherComponent!: AnotherComponent
      @Ref('aButton') readonly button!: HTMLButtonElement
    }
    

    解析后

    export default {
      computed() {
        anotherComponent: {
          cache: false,
          get() {
            return this.$refs.anotherComponent as AnotherComponent
          }
        },
        button: {
          cache: false,
          get() {
            return this.$refs.aButton as HTMLButtonElement
          }
        }
      }
    }
    

    @ref 是用于引用实际的 DOM 元素或者子组件,用 ref 比 document 拿要方便很多,使用场景不详。

    另外可能你也发现了,components、 filters、 directives、mixins等未提供装饰符的属性怎么办,接下来就是主角登场了,所有不知道怎么写的,就写它里面。

    @Component(options)

    import { Component, Vue } from 'vue-property-decorator'
    import Gap from './Gap.vue'
    
    @Component({
        components: {
            Gap,
        },
        directives: {
    		directive1: {
    			inserted: function (el) {
    				//
    			}
    		}
    	},
    	filters: {
    		filter1() {
    			return 1;
    		}
    	}
    })
    

    注意@Component的功能不是vue-property-decorator提供的,而是vue-class-component 。

    vuex-class

    同样的vuex-class可以为vuex的属性提供装饰器写法,让代码更加美观、直白。

    • 官方案例:
    import Vue from 'vue'
    import Component from 'vue-class-component'
    import {
      State,
      Getter,
      Action,
      Mutation,
      namespace
    } from 'vuex-class'
    
    const someModule = namespace('path/to/module')
    
    @Component
    export class MyComp extends Vue {
      @State('foo') stateFoo
      @State(state => state.bar) stateBar
      @Getter('foo') getterFoo
      @Action('foo') actionFoo
      @Mutation('foo') mutationFoo
      @someModule.Getter('foo') moduleGetterFoo
    
      // If the argument is omitted, use the property name
      // for each state/getter/action/mutation type
      @State foo
      @Getter bar
      @Action baz
      @Mutation qux
    
      created () {
        this.stateFoo // -> store.state.foo
        this.stateBar // -> store.state.bar
        this.getterFoo // -> store.getters.foo
        this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
        this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
        this.moduleGetterFoo // -> store.getters['path/to/module/foo']
      }
    }
    
    

    本文到此就结束了,如果有帮助到你就点个赞呗~

    展开全文
  • Vue / vue-class-component

    千次阅读 2020-10-23 17:58:29
    vue官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。 类组件 @Component 装饰器使您的类成为Vue组件 import Vue from 'vue' import Component from 'vue-class-component' // HelloWorld ...


    前言

    vue官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。


    类组件

    @Component 装饰器使您的类成为Vue组件

    import Vue from 'vue'
    import Component from 'vue-class-component'
    
    // HelloWorld class will be a Vue component
    @Component
    export default class HelloWorld extends Vue {}
    

    data

    @Component
    export default class HelloWorld extends Vue {
      // data可以直接声明为类属性
      message = 'Hello World!'
    }
    

    methods

    @Component
    export default class HelloWorld extends Vue {
      // methods可以直接声明为类方法
      hello() {
        console.log('Hello World!')
      }
    }
    

    computed

    @Component
    export default class HelloWorld extends Vue {
      name = 'John'
      
      // computed声明为类属性getter / setter
      get name() {
        return this.name
      }
      set name(value) {
        this.name= value
      }
    }
    

    hooks

    @Component
    export default class HelloWorld extends Vue {
      // 所有Vue生命周期挂钩也可以直接声明为类原型方法,但是您不能在实例本身上调用它们。
      // 声明自定义方法时,应避免使用这些保留名称。
      mounted() {
        console.log('mounted')
      }
    }
    

    其他配置项

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import OtherComponent from './OtherComponent.vue'
    
    @Component({
      // 对于所有其他选项,将它们传递给装饰器函数
      // See Vue.js docs for all available options:
      // https://vuejs.org/v2/api/#Options-Data
      components: {
        OtherComponent
      }
    })
    export default class HelloWorld extends Vue {}
    

    注册钩子

    使用Vue Router等Vue插件,可能希望类组件解析它们提供的钩子
    在这种情况下,Component.registerHooks允许注册钩子
    注册钩子后,类组件将它们实现为类原型方法
    注意:必须在组件定义之前对其进行注册

    import Component from 'vue-class-component'
    Component.registerHooks([
      'beforeRouteEnter',
      'beforeRouteLeave',
      'beforeRouteUpdate'
    ])
    

    extend

    Vue类组件支持继承

    @Component
    export default class Super extends Vue { // 父组件
      superValue = 'Hello'
    }
    
    @Component
    export default class HelloWorld extends Super { // 继承
      created() {
        console.log(this.superValue) // -> Hello
      }
    }
    

    mixins

    Vue类组件提供了mixins辅助功能,以类样式方式使用mixins。通过使用mixins帮助程序,TypeScript可以推断混合类型并在组件类型上继承它们。
    注意:所有mixin必须声明为类组件

    // mixins.js
    import Vue from 'vue'
    import Component from 'vue-class-component'
    
    @Component
    export class Hello extends Vue {
      hello = 'Hello'
    }
    @Component
    export class World extends Vue {
      world = 'World'
    }
    
    import Component, { mixins } from 'vue-class-component'
    import { Hello, World } from './mixins'
    
    @Component
    export class HelloWorld extends mixins(Hello, World) {
      created () {
        console.log(this.hello + ' ' + this.world + '!')
      }
    }
    

    props

    Vue类组件没有提供用于props定义的专用API。但是,可以通过Vue.extend来实现

    const GreetingProps = Vue.extend({
      props: {
        name: String
      }
    })
    
    @Component
    export default class Greeting extends GreetingProps {
      get message(): string {
        // this.name will be typed
        return 'Hello, ' + this.name
      }
    }
    

    extends 被占用了,如果想继承类组件或者混入时,可以使用mixins来实现

    import Vue from 'vue'
    import Component, { mixins } from 'vue-class-component'
    import Super from './super'
    
    const GreetingProps = Vue.extend({
      props: {
        name: String
      }
    })
    
    @Component
    export default class Greeting extends mixins(GreetingProps, Super) {
      get message(): string {
        return 'Hello, ' + this.name
      }
    }
    

    vuex

    import Vue from 'vue'
    import Component from 'vue-class-component'
    import { mapGetters, mapActions } from 'vuex'
    import { Post } from './post'
    
    @Component({
      computed: mapGetters([
        'posts'
      ]),
      methods: mapActions([
        'fetchPosts'
      ])
    })
    export default class Posts extends Vue {
      posts!: Post[]
      fetchPosts!: () => Promise<void>
    
      mounted() {
        this.fetchPosts().then(() => {
          console.log(this.posts)
        })
      }
    }
    

    $refs

    $refs组件的类型声明为处理所有可能的ref类型的最广泛的类型。虽然理论上是正确的,但在大多数情况下,每个ref在实践中仅具有特定的元素或组件。
    可以通过覆盖$refs类组件中的类型来指定特定的引用类型

    <template>
      <input ref="input">
    </template>
    
    @Component
    export default class InputFocus extends Vue {
      // `!` (显式赋值断言,就是由用户自己保证,这个属性在使用前会初始化,类型检查不管这个属性了)
      // 这样就可以消除编译错误
      $refs!: {
        input: HTMLInputElement
      }
    
      mounted() {
        this.$refs.input.focus()
      }
    }
    
    展开全文
  • Vue中设置class类样式

    千次阅读 2020-05-23 19:56:13
    vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象 vue中class类样式的4种绑定方式 1、数组 <h1 :class="['thin','red','italic','...
  • vue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利: 1.methods,钩子都可以直接写作class的方法 2.computed属性可以直接通过...
  • 使用Vue时,遇到一个需求,就是根据数值不同赋予一个div不同得样式,翻看文档,文档并没有提到可以或如何使用if进行判断,于是进行了尝试,发现是可以的。 ###下面让我们观看代码 <div v-for="(item,index) in ...
  • vue开发中,有时候我们需要使用计算属性函数,但是又没有具体的调用方式,这时可以将该函数强行绑定到class中。 例如有如下函数在computed计算属性中: options: function () { let companyListData = this.$...
  • vue deep使用

    千次阅读 2019-04-18 18:10:53
    vue组件,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,防止全局样式被污染,那么再vue项目怎么更好的使用deep或者怎么解决deep相关问题呢? 使用deep deep...
  • 组件加上row-class-name属性即可,直接加入该属性并且在当前vue组件配置对应class发现样式并没有生效。 解决方案 1.使用全局属性 在elementUI,row-class-name、row-style、cell-class-name等属性要想生效必须...
  • 安装 npm install vue-class-component vue-property-decorator --save-dev 其次,咱来说说它们的区别与联系: ...vue-class-component 是 vue 的官方库,作用是用类的方式编写组件,提供了Vue、Compone...
  • vue中使用iconfont的font-class

    千次阅读 2020-05-06 22:04:10
    解压缩之后把除了demo的全部放到assets下面,创建一个文件夹iconfont全部放进去。 然后main.js里面直接调用 ...import "./assets/iconfont/iconfont.css...然后在每一个vue中直接使用了。因为把图标转换成了icon...
  • Vue中的:class使用

    万次阅读 2019-01-29 16:53:59
    一个样式 :class="{makeColor:username!=''}" 多个样式(三元) :class="[email!=''?'makeColor':'',result.email===false?'makeColorRed':'']"
  • vue中class名为变量的几种写法

    千次阅读 2020-06-16 17:02:31
    1、class名只有一个,只不过是变量 <template> <div :class="classname"></div> </template> <script> export default { data() { return { classname: 'haha' } } } </...
  • vue改变class样式

    千次阅读 2019-12-24 19:58:26
    vue改变class样式 首先,定义了样式 .change{ height: 100px; width: 100px; line-height: 100px; background-color: #ff0000; border-radius: 50%; text-align: center; ...
  • vue中使用export default导出的class

    万次阅读 2020-02-16 15:47:36
    首先我们要创建一个类并导出 class win { getProcessInfo() { return 233; } } export default new win();...在vue文件引用 <script> ..... ..这里是template... ..... <script&...
  • vue中class动态绑定值拼接字符串

    千次阅读 2019-09-26 06:13:56
    :class="`字符串${index}`" 转载于:https://www.cnblogs.com/huanhuan55/p/11359426.html
  • vue 绑定class的几种方式

    万次阅读 2018-08-21 17:22:59
    对象语法 给v-bind:class 设置一个对象,可以动态地切换class,如下 &lt;div id="app"&gt; &lt;div :class="{'active':isActive}"...var app = new Vue({ el:'#app', dat
  • vue遍历Map,Map在vue中使用方法

    万次阅读 2019-11-27 11:30:15
    Map在vue中使用方法: html:遍历的时候要遍历两遍 <template> <div class="course"> <div class=""> <div class="pt0 ctRow"> <ul class="ctNavbar"> ...
  • vue中关于 :class 的几种使用方式

    千次阅读 2019-08-01 17:08:53
    最近一直在做vue项目 从网上搜索到的资料不太多。关于:class使用 结合自己的实现 ...通过vue computed 计算属性,实现 我的class 是名称+时间戳,是独一份的,可以作为id角色使用。 html: <div :class="_mod...
  • Vue中 引入使用 vue-json-editor

    千次阅读 热门讨论 2020-02-26 23:06:52
    1. 安装vue-json-editor npm install vue-json-editor --save...2. 在vue组件中使用vue-json-editor <template> <div class = "routeManagement"> <vue-json-editor v-model="routeJson" :showBt...
  • Vue 的 V2.X 版本中使用 TypeScript 时,推荐使用基于类的注解装饰器进行开发。Vue 官方推荐Vue Class Component,但是它的装饰器可能存在一点小问题,业界普遍推荐使用 vue-property-decorator,它是基于 vue-...
  • 使用ref来获取dom的时候,在给ref命名的时候尽量使用...而在给class绑定属性的时候,也应该避免使用'-'。例如, :class="{audit-btn:isBtn}" 是错误的,正确的写法是:class="{auditBtn:isBtn}"...
  • Vue+Element UI项目,需要对列表某些行加深背景色,Element官方提供了row... 根据官方的写法,并没有实现效果,查阅资料后发现,row-class-name属性要想生效必须使用全局class,而我的页面中使用了scoped。 解决方...
  • Vue中动态添加多个class

    千次阅读 2019-05-09 18:55:15
    vue中可以通过 :class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,这个时候其实也很简单 <template> <section class="p-10 cursor-pointer...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 226,825
精华内容 90,730
关键字:

vue中class怎么使用

vue 订阅