您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

05Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点(MVVM)

发布时间：2023-04-03 23:05:02编辑：雪饮阅读（）

<template>
  <div id="app">
     <!---MVVM就是双向绑定，从M层数据变化影响到V层，V层数据变化也会反向影响到M层--->
     <input type="text" v-model="input" />
     <div>{{input}}</div>
     <!---方法（事件）的使用--->
     <button v-on:click="getInputValue()">获取input值</button>
     <button v-on:click="setInputValue()">设置（重置）input值</button>
     <!---通过ref标记获取dom信息--->
     <input type="text" ref="input2" />
     <button v-on:click="getInput2Value()">获取input2值</button>
     <!---通过ref标记修改style样式属性值--->
     <div ref="box" v-on:click="changeBackgroundColor()">通过ref标记修改背景颜色,click me</div>
  </div>
</template>
 
<script>
    export default {    
      data () {
        return {
          input:"请输入",
        }
      },
      methods:{
        getInputValue(){
          alert("input的值是:"+this.input);
        },
        setInputValue(){
          this.input="你快乐吗？";
        },
        getInput2Value(){
          console.log("input2的元素:",this.$refs.input2);
          alert("input2的值是:"+this.$refs.input2.value)
        },
        changeBackgroundColor(){
          this.$refs.box.style.backgroundColor="pink";
        }
      }
    }
</script>
 
<style lang="scss">
 
</style>