vue-basic(二)

v-bind

传对象 

data: {
  isActive: true
}

可以把对象放到computed里面 computed一定要返回对象

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法

data:{
  activeClass:'active',
  errorClass:'text-danger'
}

三目运算符

会直接添加errorClass 只有在isActive为true时,才会添加activeClass

数组对象

v-else-if
A
B
非A,B

用template来包含代码块 控制一块的显示 ok为false时 template也不会显示

注意在切换页面

    
切换不加key的部分不会重新渲染 也就是说不加key 输入框有值 在切换后,值会依然有 优点:渲染速度快。

v-show 
hello
 
他的元素会始终渲染并保留你在DOM中。v-show只会切换元素的dispolay的css属性

v-if 和 v-show
都能实现控制元素隐藏与否
v-if 是'真实'的条件渲染,每一次切换 它都会销毁和重新创建条件块内的事件监听器和子组件
v-if只有在为true时才会渲染条件块
v-show它都会渲染 只是样式隐藏

v-for

  
{{item.message}}



  
{{item.message}}


v-for也可以在整数值范围内迭代,这种情况,会把模板重复多次.

   {{n}}
 

在