js循环方式
js循环 for（），基于索引的循环
let ：es6语法，用于定义变量
const：用于定义常量
var以后尽量少用
、for循环写法一：
for循环写法二：
列表循环
循环方式二：in循环
基于迭代的循环，依赖于索引取值
直接console.log是索引值，只有list[i]才是要取的值
循环方式三：of循环
和python中的in一样，这个直接console.log是要取的值
数组的方法：循环 forEach
第一个值是正常取值，第二个值是索引值
jq的取值
key值的解释
vue中使用v-for的时候，在标签上会看到key属性
key = ''item'' 用的是属性指令
key对应的值必须是唯一的
在循环的标签上，加key值的好处是，加速dom的替换
区别只在循环的变量变化时，效率高低，但是一定要注意的是：value必须是唯一
Vue.set的使用
以后可能遇到数据变了，页面没有变的情况
不能直接更改，要借助于vue提供的方法，Vue.Set更改
以后只要发现数据变了，页面没变，就先用Vue.set试一下
代码：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><script src="js/vue.js"></script> </head> <body> <div id="app"><div class="container-fluid"><div class="row"><div class="col-md-6 col-md-offset-3"><div class="text-center"><button class="btn btn-danger" @click="handleshow">点击显示购物车</button><button class="btn btn-danger" @click="handledel">删除最后一条</button><button class="btn btn-danger" @click="handleres">反转</button><button class="btn btn-danger" @click="handlefirst">变更第一条</button></div><table class="table table-bordered"><thead><tr><th>id名</th><th>商品名称</th><th>商品价格</th><th>商品数量</th></tr></thead><tbody><tr v-for="i in good_list" v-show="isShow"><td>{{i.id}}</td><td>{{i.name}}</td><td>{{i.price}}</td><td>{{i.count}}</td></tr></tbody></table></div></div></div></div> </body> <script>var vm = new Vue({el: '#app',data: {good_list: [],isShow: false},methods: {handleshow() {this.good_list = [{id: 1, name: '钢笔', price: 9.9, count: 4},{id: 2, name: '足球', price: 99, count: 4},{id: 3, name: '篮球', price: 44, count: 32},{id: 4, name: '电脑', price: 1299, count: 48},{id: 5, name: '鼠标', price: 23, count: 4},{id: 6, name: '脸盆', price: 8, count: 4},]this.isShow = !this.isShow},handledel() {this.good_list.pop()}, handleres() {this.good_list.reverse()console.log(this.good_list)},handlefirst() {Vue.set(this.good_list, 0, {id: 1, name: '专辑', price: 200, count: 1})}}}) </script></html>
v-model的使用
v-model和value的区别，单项和双向的区别，v-model在控制台改变，页面数据也会改变，页面数据改变控制台也改变，:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变
v-model可以将结果返回，value不会，但是会将当前的值放入文本框中
v-model：
value：
<body> <div id="app"><div class="container-fluid"><div class="row"><div class="col-md-6 col-md-offset-3"><div class="text-center"><h3>v-model的使用</h3><p>用户名：<input type="text" v-model="username" ></p><p>密码：<input type="password" v-model="password"></p><button class="btn btn-info" @click="handlelogin">登录</button></div></div></div></div></div></body> <script>var vm = new Vue({el: '#app',data:{username:'',password:''},methods:{handlelogin(){console.log(this.username,this.password)}}}) </script> </html>
