vue--点击事件

• Z时代
• 2024-01-10
• 分类：综合

<template>
  <div id="app">
    <p>{{msg}}</p>
    <input type="text" v-model="msg" ref="userinfo" />
    <input type="button" value="按钮" v-on:click="getMsg()">
    <input type="button" value="改变" @click="setMsg()">
    <input type="button" value="获取节点属性" @click="getNode()">    
    <input type="button" value="设置节点属性" @click="setNode()">
    <hr>
    {{text}}
    <p><input type="text" v-model="text" /><input type="button" @click="addlist()" value="按钮"/></p>
    <p v-for="x in list">{{x}}</p>   
  </div>
</template>
<script>
export default {
  name: 'App',
  data (){
    return {
      msg:"你好！",
      text:'不错！',
      list:[]
    }
  },
  methods:{
    getMsg(){
      alert(this.msg)
    },
    setMsg(){
      this.msg = "hello"
    },
    getNode(){
      console.log(this.$refs.userinfo);
      console.log(this.$refs.userinfo.value);
      this.$refs.userinfo.style.background="red";// 操作DOM
    },
    setNode(){
      this.$refs.userinfo.value = "我不好啊！" // 不能双向数据绑定
    },
    addlist(){
      this.list.push(this.text);
    }
  }
}
</script>

以上是 vue--点击事件 的全部内容， 来源链接： utcz.com/z/378440.html