2023-06-05 22:03:37 来源：博客园
表单控制
// 1 checkbox单选多选// 2 radio单选 checkbox单选
用户名:
密码:
记住密码:
(资料图片仅供参考)
用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}} checkbox多选
用户名:
密码:
记住密码:
爱好：
足球：
篮球：
乒乓球：
用户名：{{username}}----->密码：{{password}}------>记住密码：{{remember}}----->爱好：{{hobby}} radio单选
用户名：
密码：
记住密码：
爱好：
足球：
篮球：
乒乓球：
性别：
男：
女：
保密：
用户名：{{username}}--–>密码：{{password}}----> {{remember}}--->爱好：{{hobby}}--->性别：{{gender}}<script> let vm = new Vue({ el: "#app", data: { username: "", password: "", remember: false, hobby:[], gender:"" }, })</script><script> var arr = [1,2,3,4,5,6,7] // 1 基础for循环 // for(var i = 0;i 购物车
商品id 商品名 商品价格 商品数量 全选/全不选 {{good.id}} {{good.name}} {{good.price}} {{good.number}}
选中了：{{checkGroup}} 总价格：{{getPrice()}}
选中了checkbox，checkGroup会发生变化，页面也在变，都会重新刷新页面。函数就会重新执行
<script> let vm = new Vue({ el: "#app", data: { good_list: [ {id: 1, name: "钢笔", price: 12, number: 1}, {id: 2, name: "脸盆", price: 20, number: 1}, {id: 3, name: "毛笔", price: 6, number: 1}, {id: 4, name: "圆珠笔", price: 8, number: 1}, {id: 5, name: "铅笔", price: 1, number: 1}, ], checkGroup: [], checkAll: false, }, methods: { getPrice() { // 1 根据checkGroup选中的计算 // 循环checkGroup 拿出价格*数量 累加 最后返回 var total = 0 for (item of this.checkGroup) { total += item.price * item.number } return total }, handleCheckAll() { // console.log(this.checkAll) // 全选中：对钩都打上 js中的含义是：checkGroup变量满值 if (this.checkAll){ this.checkGroup = this.good_list // 全选 }else { this.checkGroup = [] // 全不选 } }, handleOne(){ // 判断checkGroup的长度 是否等于good_list的长度 if (this.checkGroup.length === this.good_list.length){ this.checkAll = true }else { this.checkAll = false } }, handleJian(good){ if (good.number > 1){ good.number-- }else { alert("不能减了") } }, handleJia(good){ good.number++ } } })</script>v-model 之lazy、number、trim// lazy:等待input框的数据绑定失去焦点之后再变化// number:数字开头，只保留数字，后面的字母不保留；字母开头，都保留// trim：去除首尾的空格 lazy修饰符
-------{{username}} number修饰符
------{{username1}} trim修饰符
-----{{username2}}<script> var vm = new Vue({ el: "#app", data: { username: "", username1: "", username2: "", }, })</script># 后端写了一堆接口# 前端现在发送请求# 前后端要打通--->从前端发送ajax--->核心:使用js发送http请求，接收返回原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑(基本不写) jQuery，写了个兼容所有浏览器的，$.ajax()，不仅仅有ajax，还封装了很多dom操作 如果在Vue中使用它，不合适 axios:第三方的ajax包(之后用这个) fetch:原生js发送ajax请求，有的浏览器也不兼容 # 写个后端:flask# pip3 install flaskfrom flask import Flask,jsonify
你的名字是：{{name}},你的年龄是{{age}}<script> let vm = new Vue({ el: "#app", data: { name: "", age: "", }, methods: { // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题 // 当前请求地址，如果向非当前地址栏中的地址发送请求，就会出现跨域 // 1.jQuery的ajax请求 handleLoad(){ $.ajax({ url:"http://127.0.0.1:5000", type:"get", success:data =>{ console.log(typeof data) var res = JSON.parse(data) this.name = res.name this.age = res.age } }) }, }, })</script>
你的名字是：{{name}},你的年龄是{{age}}<script> let vm = new Vue({ el: "#app", data: { name: "", age: "", }, methods: { handleLoad() { // var _this = this // fetch("http://127.0.0.1:5000").then(function (response) { // // console.log(response) // return response.json() // }).then(function (res) { // // console.log(res) // _this.name = res.name // _this.age = res.age // }) // 箭头函数写法 fetch("http://127.0.0.1:5000").then(response=>response.json().then(res=>{ this.name = res.name this.age = res.age })) } }, })</script>
你的名字是：{{name}},你的年龄是{{age}}<script> let vm = new Vue({ el: "#app", data: { name: "", age: "", }, methods: { handleLoad() { // var _this = this // axios.get("http://127.0.0.1:5000") // .then(function (response) { // // console.log(response.data); // _this.name = response.data.name // _this.age = response.data.age // }) // .catch(function (error) { // console.log(error); // }); // 箭头函数写法 axios.get("http://127.0.0.1:5000").then(res => { this.name = res.data.name this.age = res.data.age }).catch(error => { console.log(error) }) } }, })</script><script> // 箭头函数 // 1.无参数，无返回值 let f = function () { console.log("我是匿名函数") } let f = () => { console.log("我是匿名函数") } f() // 2.有一个参数，没有返回值，可以省略括号 let f = function (name) { console.log("我是匿名函数",name) } let f = name => { console.log("我是匿名函数",name) } f("XxMa") // 3.多个参数，不能省略括号 let f = function (name,age) { console.log("我是匿名函数",name,age) } let f = (name,age) => { console.log("我是匿名函数",name,age) } f("XxMa",19) // 4.多个参数，不能省略括号，一个返回值 let f = (name,age) => { return name + "nb" } // 简写 let f = (name,age) => name + "nb" let res = f("XxMa",19) console.log(res) // 5.一个参数，一个返回值 let f = name => name + "nb" let res = f("XxMa",19) console.log(res)</script>标签：
