学习完Vue2 的C友们，今天继续追赶Vue3的大潮流吧！
废话不多说，直接上代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.esm-browser.js"></script>
</head>
<body>
<div id="app">
<h3>文本框{{data.text}}</h3>
<h3>单选框{{data.radio}}</h3>
<h3>复选框{{data.checkbox}}</h3>
<h3>记住密码 {{data.remenber}}</h3>
<h3>下拉框{{data.select}}</h3>
<!-- 单项数据绑定，当数据发行改变时，视图会自动更新，但用户手动更改时input值，数据不会自动更行 -->
<h3>单项数据绑定 <input type="text" :value="data.text"> </h3>
<!-- 双向数据绑定，当数据发生改变时，视图会自动更新，当用户手动更改input值时，数据也会自动更新
对于 <input type="text" > v-module 绑定的是input元素的Value属性
-->
<h3>双向数据绑定</h3> <input type="text" v-model="data.text"><br><br>
<!-- 单选框 对于<input type="radio">，V-model 绑定的是input 元素的选中状态 -->
<input type="radio" v-model="data.radio" value="1">写作
<input type="radio" v-model="data.radio" value="2"> 画画
<br><br>
<!-- 复选框 对于<input type="checkout" > v-model绑定的是input元素的选中checked属性 -->
<input type="checkbox" v-model="data.checkbox" value="a">阅读
<input type="checkbox" v-model="data.checkbox" value="b">画画
<input type="checkbox" v-model="data.checkbox" value="c">写作
<br><br>
<!-- 记住密码 -->
<input type="checkbox" v-model="data.remenber" > 记住密码
<br><br>
<!-- 下拉框，对于<select> v-model绑定的是select元素的选中状态-->
<select v-model="data.select">
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
</div>
<script type="module">
import {createApp,reactive,ref} from '../js/vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
text:"dangruicode.com", //文本框
radio:"" , //单选框
checkbox:[],//复选框
remenber:false, //单个复选框-记住密码
select:"" , //下拉框
})
return{
data,
}
}
}).mount("#app")
</script>
</body>
</html>
v-model 修饰符
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.esm-browser.js"></script>
</head>
<body>
<div id="app">
<h3>url:{{web.url}}</h3>
<h3>user:{{web.user}}</h3>
实时渲染<input type="text" v-model="web.url"><br><br>
lazy实时渲染<input type="text" v-model.lazy="web.url">
<br><br>
<!-- 输入100人，web.user的值仍为100 -->
不添加 .number <input type="text" v-model="web.user"><br><br>
输入框的值转换为数据类型 <input type="text" v-model.number="web.user">
<br><br><br>
没有 .trim <input type="text" v-model="web.url"> <br><br>
去除首位空格<input type="text" v-model.trim="web.url">
</div>
<script type="module">
import {createApp,reactive} from '../js/vue.esm-browser.js'
createApp({
setup(){
const web = reactive({
url:"www.baidu.com",
user:100,
})
return{
web
}
}
}).mount("#app")
</script>
</body>
</html>
对了，还有一个还有Vue.js文件，可以去官网下载（https://unpkg.com/vue@3/dist/vue.esm-browser.js）
同时,我也上传啦
![[数据集][目标检测]电力场景输电线异物检测数据集VOC+YOLO格式2060张1类别](https://i-blog.csdnimg.cn/direct/087fcbb6be024598bf6ab04a9457483d.png)
![[医疗 AI ] 3D TransUNet：通过 Vision Transformer 推进医学图像分割](https://i-blog.csdnimg.cn/direct/d32a0be7130540f293c4066cc9f1ccf5.png#pic_center)
