数据双向绑定
主要涉及以下内容
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="width: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>
标签:vue,console,assets,绑定,sitefiles,num,images,数据 From: https://www.cnblogs.com/xiongwei/p/16609178.html