图片轮播案例：
<!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 = truewatch(() =>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 = trueflag = true}else{data.selected = falseflag = 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>
前端是练出来的！
