Loading

vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

<template>
  <div id="app">
    <!-- 双向数据绑定(必须在表单里面使用) m:model  v:view  mvvm:model改变会影响视图,视图改变会影响model -->
    <h2>{{msg}}</h2>
    <input type="text" v-model="msg" />
    <button v-on:click="getMsg()">获取表单数据get</button>
    <button v-on:click="setMsg()">设置表单数据set</button>
    <br>
    <hr>
    <br>
    <input type="text" ref="input2" />
    <button v-on:click="getMsg2()">获取表单2数据get</button>
    <br>
    <hr>
    <br> 
    <div ref="box">box</div>
    <button v-on:click="getMsg2()">获取表单2数据并改变box字体颜色</button>
  </div>
</template>

<script>
export default {
  data () {/*业务逻辑里面定义的数据*/
    return {        
        msg:'你好,世界',
    }
  },
  methods:{/*方法*/
    getMsg(){
        alert(this.msg)
    },
    setMsg(){
        this.msg="改变后数据"
    },
    getMsg2(){
        //获取ref定义的dom节点
        console.log(this.$refs.input2);
        this.$refs.box.style.color = 'red';
        alert(this.$refs.input2.value);
    }
  }
}
</script>

<style>
    
</style>

 

posted @ 2018-08-29 11:28  5572  阅读(177)  评论(0编辑  收藏  举报