做网站图片大小,网站开发团队成员,外国平面设计网站有哪些,网站页面头部设计说明目录 一 v-model表单元素
1.1 v-model绑定文本域的value
1.1.1 lazy属性#xff1a;光标离开再发请求
1.1.2 number属性#xff1a;如果能转成number就会转成numer类型
1.1.3 trim属性#xff1a;去文本域输入的前后空格
1.2v-model绑定单选checkbox
1.3代码展示
二 …目录 一 v-model表单元素
1.1 v-model绑定文本域的value
1.1.1 lazy属性光标离开再发请求
1.1.2 number属性如果能转成number就会转成numer类型
1.1.3 trim属性去文本域输入的前后空格
1.2v-model绑定单选checkbox
1.3代码展示
二 v-for循环指令
三 计算属性
四 侦听器 一 v-model表单元素 v-model其实我自己就是单纯的把他理解成双向绑定指令。 和v-bind一样都是操作数据只是这个一般用在表单中。 1.1 v-model绑定文本域的value !-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--!-- lazy属性光标离开再发请求 --input typetext placeholder请输入用户名 v-model.lazyusername value默认值/h2{{username}}/h2 我们用v-model绑定username当我们在文本框中输入值后对应的username也会进行数据的双向绑定从而展示在页面上效果如下: 1.1.1 lazy属性光标离开再发请求 如上面所示给v-model加上lazy属性可以实现光标离开后再执行。 1.1.2 number属性如果能转成number就会转成numer类型 !-- number属性如果能转成number就会转成numer类型比如文本域中输入数字原本时string但是加上这个属性就会转成number --input typetext nameage v-model.numberagebutton clickchange()获取age类型/buttonh2age的类型:{{type}}/h2 正常来说type“text”的文本域就算输入的数字也是string类型而是由这个.number属性就可以把数字转成number类型方便进行运算需求。 1.1.3 trim属性去文本域输入的前后空格 !-- trim属性去文本域输入的前后空格 --input typetext v-model.trimusername 1.2v-model绑定单选checkbox 实现代码如下 !-- v-model绑定单选checkbox --input typeradio name sex v-modelsex value男男input typeradio name sex v-modelsex value女女h2{{sex}}/h2具体逻辑如下 效果展示 1.3代码展示 完整代码以及注释如下: html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- v-model绑定文本域的value ,如果有value会覆盖掉value属性--!-- lazy属性光标离开再发请求 --input typetext placeholder请输入用户名 v-model.lazyusername value默认值/h2{{username}}/h2!-- number属性如果能转成number就会转成numer类型比如文本域中输入数字原本时string但是加上这个属性就会转成number --input typetext nameage v-model.numberagebutton clickchange()获取age类型/buttonh2age的类型:{{type}}/h2!-- trim属性去文本域输入的前后空格 --input typetext v-model.trimusername!-- v-model绑定单选checkbox --input typeradio name sex v-modelsex value男男input typeradio name sex v-modelsex value女女h2{{sex}}/h2!-- v-mode绑定下拉框 --select namecity v-modelcityoption valuecs长沙/optionoption valuebj北京/optionoption valuesh上海/option/selecth2{{city}}/h2/divscript typetext/javascript src../vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata: function() {return {username: , sex:女 , city:sh,age:18,type:}},methods:{change(){this.type typeof this.age}}})// 2.挂载appapp.mount(#app)/script
/body
/html 效果图如下: 二 v-for循环指令 一般用在表格展示数据的时候。 直接展示表格循环获取数据的代码 还有可以直接获得数组的下标index 完整代码展示: html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph2列表展示/h2ul!-- 从数组arr中取出值name --li v-for name in arr{{name}}/li/ulul!-- 从数组arr中取出值name和对应的小标index --li v-for (name,index) in arr{{index}}--{{name}}/li/ulh2学生信息展示/h2tabletrth编号/thth姓名/thth年龄/th/tr!-- 遍历对象数组 --tr v-for stu in student th{{stu.id}}/thth{{stu.name}}/thth{{stu.age}}/th/tr/tableh2嵌套For循环/h2tabletrth编号/thth姓名/thth年龄/thth女朋友/th/tr!-- 遍历对象数组 --tr v-for stu in student th{{stu.id}}/thth{{stu.name}}/thth{{stu.age}}/th/tr/table/divscript typetext/javascript src../vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata: function() {return {arr:[张三 , 李四 , 王五] , student:[{id:1,name:张三,age:13,girfriends:[{name:小美,age:12},{name:小芳,age:11}]},{id:2,name:李四,age:15,girfriends:[{name:小王,age:99},{name : 小玉,age:23}]}]}},})// 2.挂载appapp.mount(#app)/script
/body
/html 效果展示 三 计算属性 说的明白一点就是用来监听数据的。 这个函数里面有一个get函数当需要获得get函数里面的属性的时候就会自动调用这个get函数从而获取数据。
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystyleinput{width: 50px;}/stylediv idappinput typenumber v-modelnumber1 input typenumber v-modelnumber2 {{sum}}brinput typenumber v-modelnumber3 mouseoutsuminput typenumber v-modelnumber4 mouseoutsum{{sum}}/divscript typetext/javascript src../vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata: function() {return {number1:0,number2:0,result:0}},methods:{// sum(){// this.result this.number1this.number2// }},methods:{sum:function(){return parseInt(this.number1) parseInt(this.number2);}},// 计算属性computed:{sum:{get(){ //get方法, 当有人读取计算属性时,该计算属性的get()函数就会执行return parseInt(this.number1) parseInt(this.number2); //此时的this就是vm}}}})// 2.挂载appapp.mount(#app)/script
/body
/html 如上面这个代码逻辑如下 效果如下 四 侦听器 和计算属性作用一样都是用来监听数据的。 不过侦听器监听的数据是你自己设置的设置完成后当你设置的那个数据一旦发生变化就会调用侦听器的函数实现数据的重新计算等。 代码如下
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapptable border1 trth/thth书籍名称/thth出版日期/thth价格/thth购买数量/thth操作/th/trtr v-for(book , index) in arrth{{index1}}/thth{{book.name}}/thth{{book.day}}/thth{{book.price}}/ththbutton clicksubNumber(book.id) -/button{{book.number}}button clickaddNumber(book.id)/button/ththbutton clickdel(index)移除/button/th/tr/tableh2总价{{sum()}}/h2/divscript typetext/javascript src../../vue.js/scriptscript// 1.创建appconst app Vue.createApp({// data: option apidata: function() {return {total:0,nnumber:1,arr:[{id:1,name:挪威的森林,day:2024.10.23,price:102,number:1,},{id:2,name:活着,day:2024.10.11,price:66,number:1,}]}},methods:{sum(){if(this.total0){this.arr.forEach(element {this.total(element.price*element.number)});}else{return this.total} },// updateCount() { // alert(88)// } ,del(id){this.arr.splice(id,1)},subNumber(id){this.total10this.arr.forEach(element {if(element.idid){if(element.number0){this.nnumber--element.number--;}}});},addNumber(id){this.arr.forEach(element {if(element.idid){this.nnumberelement.number}});}},// 使用onMounted来在页面加载完成后调用updateCount
// onMounted:(() {
// updateCount();
// }),watch: { arr: { handler(newValue, oldValue) { this.total0this.arr.forEach(element {this.total (element.number*element.price)}); }, deep: true // 开启深度侦听 } }, })// 2.挂载appapp.mount(#app)/script
/body
/html
逻辑如下
