数据双向绑定
主要涉及以下内容
v-model,number和v-model.lazy
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/v3.2.8/vue.global.prod.js"></script>
<title>Document</title>
</head>
<body>
<!-- -->
<div id="app">
<h1 v-bind:title="tit" v-text="msg" v-on:click="showdata"></h1>
<button v-on:click="jianshao">-</button>
<span v-text="num">0</span>
<button v-on:click="zengjia">+</button>
<button @click="qietu(1)">切换图片1</button>
<button @click="qietu(2)">切图3</button>
<img v-bind:src="mapsrc" alt="图片" style="100px;height: 100px;">
<ul>
<li v-for="item in lists">{{item}}</li>
</ul>
<button v-for="item,index in mapslist" @click="qietu(index)">{{index+1}}</button>
<hr>
<form v-on:submit.prevent="post">
<input type="text" v-model="msg">
<button>提交</button>
</form>
</div>
<script>
// 如何操作文本、属性、事件
Vue.createApp({
data() {
return {
msg: "数据双向绑定",
tit: "文本绑定",
num: "0",
mapsrc: "/sitefiles/assets/images/video-clip.png",
mapslist: [
"/sitefiles/assets/images/audio-clip.png",
"/sitefiles/assets/images/default_avatar.png",
"/sitefiles/assets/images/loading.gif"
],
lists: ["qqqq", "22222", "哈哈", "4"]
}
},
methods: {
showdata() {
alert("操作事件")
},
zengjia() {
this.num++;
},
jianshao() {
if (this.num > 0) {
this.num--;
}
},
qietu(i) {
this.mapsrc = this.mapslist[i];
},
post() {
console.log("控制台console输出");
console.log(this.msg);
}
}
}).mount("#app")
</script>
</body>
</html>
双向数据绑定涉及输入相关属性
input失去焦点 v-model-lazy=""
v-model.number限制数字
v-model.trim清除字符空格