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>
标签：count,事件处理,name,price,js,循环,model,id From： https://www.cnblogs.com/YeeQX/p/17712488.html