开发文档
Vue2
变量

变量

变量的存储

vue的变量存储一般存储在以下两个地方

  • 存储于data中，详细内容见：vue文件结构章节

  • 存储于props中，详细内容见：vue的组件章节

变量的使用

注意，在props和data中的所有变量调用方法一致

在method或者created中调用

使用this.变量名称调用，例如：

<template>
  <div>
    <button @click="fun">这是按钮</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      text:"Hello world!"
    }
  },
  methods: {
    fun:function(){
      console.log(this.text);
    }
  }
}
</script>

在watch中调用

对于想要监听的变量，直接使用即可，但是在监听之后运行的函数，需要使用this，例如：

<template>
  <div>
    <button @click="fun">这是按钮</button>
  </div>
</template>
<script>
export default {
  data(){
    return:{
      text:"Hello world!"
    }
  },
  methods: {
    fun:function(){
      this.text="hello vue!"
    }
  },
  watch: {
    text: function(){
      console.log("Text changed!")
    }
  }
}
</script>

在页面内容中调用

直接引用变量值

直接使用双大括号引用变量即可

<template>
  <div>
    {{text}}
  </div>
</template>
<script>
export default {
  data(){
    return: {
      text: "Hello world!"
    }
  },
}
</script>

使用函数处理之后的变量

同样使用双大括号引用

<template>
  <div>
    {{Func(text)}}
  </div>
</template>
<script>
export default {
  data(){
    return: {
      text:"Hello world!"
    }
  },
  methods: {
    Func(text){
      // 注意要有返回值
      return text+" Hello vue!";
    }
  }
}
</script>

注意，关于computed和methods，见13_methods内容和14_computed

在页面标签中调用

对于vue自带的属性 

<template>
  <div>
    <div v-if="text">
      Hello world!
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return:{
      text:true
    }
  },
}
</script>

对于v-if和v-show的使用，详细见7_v-if和v-show内容

对于HTML属性

详细见8_v-bind内容

双向绑定 

<template>
  <div>
    <input v-model="text" />
  </div>
</template>
<script>
export default {
  data(){
    return:{
      text:""
    }
  },
}
</script>
组件v-if和v-show