Vue使用总结

Posted 2020-12-31 gaomanito

1,vue.js — v-cloak的使用

 

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none !important}一起用时，这个指令可以隐藏未编译的带有{{ }}或者{{{ }}}标签直到实例准备完毕。

<style>
  [v-cloak]{display:none !important}
</style>

 

不加时html 绑定 Vue实例，在页面加载时会闪烁

加上时,会隐藏.

 2,vue.js — computed(计算属性)的使用

  //计算属性
  computed: {
    totalPrice :function(){
      var total = 0;
　　　　for(var i=0;i<this.form.application.length;i++){
　　　　 　total+=this.form.application;

　　　　}
      return total?‘$‘+total:‘‘;
   }
如所示，在html中，我们只需要使用{{totalPrice}}这个计算属性就可以来表示最终的商品总额。我们不需要关注这个变量的数值变化，totalPrice这个变量的逻辑写在对应的computed计算属性中。

3,vue.js — rules(表单校验)的使用

自定义表单验证出坑:
1: validate/resetFields 未定义。
原因：
1：要验证的DOM，还没有加载出来。
2：有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式，不是你们想要的结果。

解决方法
1： 要验证的DOM，还没有加载出来。

this.ticketDialog = true;

//对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

this.$nextTick(function() {

  this.$refs.ticketInfoForm.resetFields();
  //that.$refs.editIndexForm.validateField(‘no‘);
})

  2： 有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();