Vue2与vue3 写法对照

vue3写法

javascript 复制代码
<template>
  <div>
    <input placeholder="请输入" style="color: red; font-size: 80px;" v-model="inputValue" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>
<script setup>
	 import { ref } from 'vue';
     const inputValue = ref('');
	 function handleSubmit() {
		  if (inputValue.value === '') {
			alert('请输入内容')
		  } else {
			alert('已输入')
		  }
	 }
</script>

vue2写法

javascript 复制代码
<template>
  <div>
    <input v-model="inputValue" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleSubmit() {
      if (this.inputValue === '') {
        alert('请输入内容')
      } else {
        // do something...
      }
    }
  }
}
</script>
相关推荐
前端Hardy3 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy5 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙29 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端12338 分钟前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天40 分钟前
前端 9大 设计模式
前端
搞个锤子哟40 分钟前
网站页面放大缩小带来的问题
前端
hj5914_前端新手40 分钟前
React 基础 - useState、useContext/createContext
前端·react.js
半花43 分钟前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅44 分钟前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
霍格沃兹_测试1 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端