图片轮播案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--轮播图片-->
<div id="app">
<h1>轮播图</h1>
<button @click="last">上一张</button>
<img :src=`./img/${number}.jpg` style="height: 10%" width="10%">
<button @click="next">下一张</button>
<hr>
<ul>
<li v-for="value in 5">
<a href="#" @click="jump(value)">{{value}}</a>
</li>
</ul>
</div>
<script type="module">
import {createApp,ref,reactive} from './vue.esm-browser.js'
createApp({
setup(){
const number = ref(1)
const next = () =>{
number.value++
if(number.value>5){
number.value=1
}
}
const last = () =>{
number.value--
if(number.value<1){
number.value=5
}
}
const jump = (index) =>{
number.value = index
}
return{
number,
next,
last,
jump
}
}
}).mount('#app')
</script>
</body>
</html>
记事本案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="data.content">
<button @click="add">添加</button><p/>
<ul>
<li v-for="(item,index) in data.list" :key="index">
{{item}}
<button @click="update(index)">修改</button>
<button @click="del(index)">删除</button>
</li>
</ul>
<hr>
{{data.list.length}}
<button @click="clear">清空</button>
</div>
<script type="module">
import {createApp,ref,reactive} from '../js/vue.esm-browser.js'
createApp({
setup(){
const data = reactive({
content:"https://blog.csdn.net/m0_73856804?spm=1010.2135.3001.5343",
list:["麓殇","https://blog.csdn.net/m0_73856804?spm=1010.2135.3001.5343"]
})
// 添加数据
const add = () =>{
data.list.push(data.content)
console.log(data.list)
}
//删除数据
const del = (index) =>{
data.list.splice(index,1)
console.log(data.list)
}
//修改数据
const update = (index) =>{
data.content = data.list[index]
console.log(data.list)
}
//清空数据
const clear = () =>{
data.list = []
console.log(data.list)
}
// 获取数据的数量
return{
data,
add,
del,
clear,
update
}
}
}).mount('#app')
</script>
</body>
</html>
购物车案例(watch,computed)
<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>购物车</title>
</head>
<style>
table{
width: 600px;
border: 1px solid #c8baba;
text-align: center;
border-collapse: collapse;
}
table thead{
background: #756161;
border: 1px solid #c8baba;
}
table tbody tr{
border: 1px solid #c8baba;
height: 30px;
line-height: 30px;
background: #a56d6d;
}
</style>
<body>
<div id="app">
<table>
<thead>
<tr>
<th><input type="checkbox" v-model="data.selected" ></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品库存</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in data.goods">
<td><input type="checkbox" :value="item.id" v-model="data.checkboxlist" ></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.stock}}</td>
<td>
<button @click="sub(item)">-</button>
{{item.count}}
<button @click="add(item)">+</button>
</td>
<td>
<button @click="del(index,item.id)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
总价:{{totalPrice}}
</td>
</tr>
</tfoot>
</table>
</div>
<!--@change:change事件是在元素的值发生改变的时候会触发的事件，我们可以通过该事件实现商品的全选和取消全选-->
<script type="module">
import {createApp,reactive,watch,computed} from '../js/vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
checkboxlist:[],//存储购物车中的选中的商品
selected: false,//全选按钮是否被选中
goods: [
{
id: 1,
name: '华为手机',
price: 4000,
count: 100,
stock: 200
},
{
id: 2,
name: '小米手机',
price: 2600,
count: 100,
stock: 200
},
{
id: 3,
name: '三星手机',
price: 8000,
count: 100,
stock: 200
},
{
id: 4,
name: '荣耀手机',
price: 7000,
count: 100,
stock: 200
}
],
})
const totalPrice = computed(() => {
let total = 0
//reduce定义：用于数组中的所有元素进行迭代操作，并将每一次操作的结果累加在一个初始值上
//reduce接受两个参数：一个是累加函数，一个是初始值
//reduce：将data.checkboxList数组中的每个对象的price和count相乘，将结果累加在初始值 0 上，最后返回结果
// const item1 = data.goods.find(good => good.id === data.checkboxlist[i])
for (let i = 0; i < data.checkboxlist.length; i++) {
const item = data.goods.find(good => good.id === data.checkboxlist[i])
if (item) {
total += item.price * item.count
}
}
return total
})
const add = (item) => {
if (item.count < item.stock) {
item.count++
item.stock--
}
}
const sub = (item) => {
if (item.count > 1) {
item.count--
item.stock++
}
}
let flag = true
watch(() =>data.selected,(newValue,oldValue)=>{
console.log(newValue,oldValue)
if (newValue) {
data.checkboxlist = data.goods.map(item => item.id)
}else {
if (flag){
data.checkboxlist = []
}
}
})
watch(()=>data.checkboxlist,(newValue,oldValue)=>{
if (newValue.length === data.goods.length && newValue.length !== 0){
data.selected = true
flag = true
}else{
data.selected = false
flag = false
}
})
const del = (index,id) => {
data.goods.splice(index,1)
let newArr = data.checkboxlist.filter((item,index) =>{
return item.id !== id
})
data.checkboxlist = newArr
}
return {
data,
totalPrice,
add,
del,
sub,
}
}
}).mount('#app')
</script>
</body>
</html>
前端是练出来的！
