Vue双向数据绑定

Posted 2020-11-11 chester.chen

v-model：双向数据绑定必须在表单中使用，input，select等

v-on:click 简写 @click  ：事件绑定，方法放到methods中

ref="userInfo"   ：   给标签设置ref属性，可在js中通过this.$refs获取到相应dom节点

this.$refs.userInfo：可以获取到dom节点，之后可获取dom 的值，也可以设置dom 的style等属性

 

 

<template>
  <div id="app">
    <div>
      {{msg}}
      <br>
      <input v-model="msg" ref="info">
      <button v-on:click="getMsg()">获取msg</button>
      <button @click="setMsg()">设置msg</button>
      <button @click="getRef()">通过$refs获取值</button>
      <button @click="setRef()">通过$refs设置属性</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Hello Vue"
    };
  },
  methods: {
    getMsg() {
      alert(this.msg);
    },
    setMsg(){
      this.msg="新值";
    },
    getRef(){
      alert(this.$refs.info.value)
    },
    setRef(){
      this.$refs.info.style.color="red";
    }
  }
};
</script>

<style lang="scss">
.red {
  color: red;
}
.redA {
  background: red;
}
</style>