vue之条件渲染、列表渲染、事件处理、数据双向绑定、表单控制及购物车案例

最新推荐文章于 2022-09-03 11:20:26 发布
最新推荐文章于 2022-09-03 11:20:26 发布
阅读量324 收藏 2
点赞数
分类专栏： python 文章标签： vue python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcg920212/article/details/111216477
版权

文章目录

1、条件渲染

1.1、通过v-if和v-for实现简单购物车
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h2>根据下标获取对应的水果</h2>
    <ul>
        <li>{{fruit_list[0]}}</li>
        <li>{{fruit_list[1]}}</li>
        <li>{{fruit_list[2]}}</li>
        <li>{{fruit_list[3]}}</li>
    </ul>

    <h2>通过循环遍历获取对应的水果</h2>
    <ul>
        <li v-for="data in fruit_list">{{data}}</li>
    </ul>

    <h2>根据购物车判断是否存在水果</h2>
    <ul v-if="fruit_list.length>0">
        <li v-for="data in fruit_list">{{data}}</li>    <!--如果fruit_list有值打印水果-->
    </ul>
    <div v-else>购物车空空如也</div>                      <!--如果fruit_list为空列表时打印-->
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            fruit_list: ['苹果', '香蕉', '桃子', '哈密瓜'],
        },
    })
</script>

</body>
</html>
1.2、v-if、v-else-if、v-else的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <div v-if="number == 1">1</div>
    <div v-else-if="number == 2">2</div>     <!--在data中number为2,所以打印2-->
    <div v-else>3</div>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            number: 3,
        },
    })
</script>

</body>
</html>

2、列表渲染

2.1、for循环数组、对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>循环数组</h1>
    <div>
        <p v-for="item in arr">{{item}}</p>
    </div>

    <h1>循环对象(此处循环得到的是value,python中循环得到的是key)</h1>
    <div>
        <p v-for="item in obj">{{item}}</p>
    </div>

    <h1>循环数组的index和value</h1>
    <div>
        <p v-for="(item,index) in arr">index: {{index}}, value: {{item}}</p>
    </div>

    <h1>循环对象的key和value</h1>
    <div>
        <p v-for="(item,key) in obj">key: {{key}}, value: {{item}}</p>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr: ['篮球', '足球', '羽毛球'],
            obj: {name: 'allen', age: 18, gender: 'male'},
        },
    })
</script>

</body>
</html>
2.2、key值的解释
1、v-for循环数组、对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2、页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3、:key="变量"

示例: <p v-for="(item,key) in obj" :key="key(属性值唯一，正常取数据的id对应的属性值)">key: {{key}}, value: {{item}}</p>
2.3、数组更新与检测
1、数据双向绑定，数据变化页面变，页面变化数据变
2、使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
3、不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
	页面不会更改：vm.arr.concat(['44','55'])
	解决vm.arr=vm.arr.concat(['44','55'])
4、页面不会更改：通过索引值更新数组
	解决方案一:
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
    
	解决方案二:
		Vue.set(vm.arr,0,'allen')
5、上面能更新是因为作者重写了那些方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <ul>
        <li v-for="data in arr_list">{{data}}</li>
        <button @click="clickHandler">点击按钮把篮球换成乒乓球</button>
    </ul>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr_list: ['篮球', '足球', '羽毛球']
        },
        methods: {
            clickHandler() {
                this.arr_list[0] = '乒乓球';            // 这种方法只能将列表中第一个值改成乒乓球,页面中的li还是篮球
                Vue.set(vm.arr_list, 0, '乒乓球');      // 这种方法可以将页面中的li修改成乒乓球
            },
        }
    })
</script>

</body>
</html>

3、事件处理

blur：失去焦点触发
change：失去焦点触发，跟blur一样
input：数据发生变化，就会触发

3.1、input过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>过滤数据</h1>
    <!--    请输入数据: <input type="text" v-model="mydata" @blur="changeHandler">-->
    请输入数据: <input type="text" v-model="mydata" @input="changeHandler">
    {{mydata}}
    <div>
        <ul>
            <li v-for="item in new_arrlist">{{item}}</li>
        </ul>
    </div>

</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr_list: ['aabbcc', 'abcdef', 'aacdee', 'bbccdd'],
            new_arrlist: ['aabbcc', 'abcdef', 'aacdee', 'bbccdd'],
            mydata: '',
        },
        methods: {
            changeHandler() {
                // 控制arr_list的变化，数据又双向绑定了，页面就会变化
                this.new_arrlist = this.arr_list.filter(item => {
                    return item.indexOf(this.mydata) > -1
                })
            },
        },
    })
</script>

</body>
</html>
3.2、简单事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <div v-show="isShow">
        <p>数据1</p>
        <p>数据2</p>
        <p>数据3</p>
        <p>数据4</p>
        <p>数据5</p>
    </div>

    <button @click="isShow=!isShow">点击数据折叠/展开(方式一)</button>
    <button @click="clickHandler">点击数据折叠/展开(方式二)</button>
    <button @click="clickHandler($event)">点击数据折叠/展开,传递事件,方式二默认也传递事件(方式三)</button>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            clickHandler(ev) {
                this.isShow = !this.isShow;
                console.log(ev)
            },
        },
    })
</script>

</body>
</html>
3.3、事件修饰符

.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <ul @click.self="clickUlHandler">  <!--事件冒泡处理方式三: 给父元素添加.self就不会出现事件冒泡-->
        <li v-for="item in arr_list" @click.stop="clickLiHandler">{{item}}</li>  <!--事件冒泡处理方式二: .stop就不会出现事件冒泡-->
        <li v-for="item in arr_list" @click="clickLiHandler">{{item}}</li>
    </ul>

    <div>
        <a href="http://www.baidu.com" @click="clickHandler">点击但并不想跳转1</a>
        <a href="http://www.baidu.com" @click.prevent="clickHandler1">点击但并不想跳转2</a>  <!--方式二: 这样设置后点击标签不会跳转-->
    </div>

    <div>
        <button @click.once="clickOnceHandler">点一次事件就消失了</button>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr_list: ['篮球', '足球', '羽毛球'],
        },
        methods: {
            clickUlHandler() {
                console.log('ul被点击了');
            },
            clickLiHandler(ev) {
                // ev.stopPropagation();       // 事件冒泡处理方式一: 这样设置就不会出现事件冒泡,点击事件停止向父组件传递
                console.log('li被点击了');
            },
            clickHandler(ev) {
                // ev.preventDefault();           // 方式一: 点击标签并不会跳转,阻止a标签的跳转
            },
            clickHandler1() {
                console.log('被点击了')
            },
            clickOnceHandler() {
                console.log('点一次就消失了')
            }
        },
    })
</script>

</body>
</html>
3.4、按键修饰符

敲击键盘上的按键执行某件事

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    敲击回车键(方式一): <input type="text" v-model="myinput" @keyup.enter="KeyHandler">
    敲击回车键(方式二): <input type="text" v-model="myinput" @keyup.13="KeyHandler">
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: '',
        },
        methods: {
            KeyHandler() {
                console.log('回车键被按下了')
            },
        },
    })
</script>

</body>
</html>

4、数据双向绑定

4.1、v-model使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <p><input type="text" v-model="myinput"></p>{{myinput}}
    <p><textarea name="" id="" cols="30" rows="10" v-model="mytextarea"></textarea></p>{{mytextarea}}
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: '',
            mytextarea: '',
        },
    })
</script>

</body>
</html>

5、表单控制

5.1、checkbox选中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>表单相关之checkbox</h1>
    <input type="checkbox" v-model="check">记住密码
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            check: true,
        },
    })
</script>

</body>
</html>
5.2、多选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>爱好</h1>
    <input type="checkbox" v-model="hobby" value="sport">运动
    <input type="checkbox" v-model="hobby" value="reading">阅读
    <input type="checkbox" v-model="hobby" value="travel">旅游
    <p>{{hobby}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            hobby: [],
        },
    })
</script>

</body>
</html>
5.3、单选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>性别</h1>
    <input type="radio" v-model="gender" value="男">男
    <input type="radio" v-model="gender" value="女">女
    <input type="radio" v-model="gender" value="保密">保密
    <p>{{gender}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            gender: '',
        },
    })
</script>

</body>
</html>

6、 购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/vue.js"></script>

<div id="box">
    <h1>购物车列表</h1>
    <input type="checkbox" v-model="selectAll" @change="CheckHandler">全选/全不选
    <ul>
        <li v-for="item in data_list">
            <input type="checkbox" v-model="my_car" :value="item" @change="handlerOne">
            {{item}}
        </li>
    </ul>
    <p>我的购物车清单: {{my_car}}</p>
    <p>价格合计: {{get_price()}}</p>
</div>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            data_list: [
                {name: '西瓜', price: 10, number: 3, id: '1'},
                {name: '苹果', price: 3, number: 4, id: '2'},
                {name: '香蕉', price: 80, number: 6, id: '3'}
            ],
            my_car: [],
            selectAll: false,
        },
        methods: {
            get_price() {
                var total_sum = 0;
                for (k in this.my_car) {
                    total_sum += this.my_car[k]['price'] * this.my_car[k]['number'];
                }
                return total_sum;
            },
            CheckHandler() {
                if (this.my_car.length > 0) {
                    this.my_car = []
                } else {
                    this.my_car = this.data_list;
                }
            },
            handlerOne() {
                if (this.my_car.length == this.data_list.length) {
                    this.selectAll = true;
                } else {
                    this.selectAll = false;
                }
            },
        }
    })
</script>

</body>
</html>
一切随心走_水瓶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue之条件渲染,列表渲染,事件处理,数据双向绑定,表单控制,购物车案例
yikenaoguazi的博客
12-15 209
这里写目录标题一.昨日回顾style和class的控制class三种控制方式style三种控制方式二.今日内容1.条件渲染1.1通过v-if和v-for实现购物车1.2v-if/v-else-if/v-else2.列表渲染2.1for循环数组,对象2.2key值的解释2.3数组更新与检测3.事件处理3.1input过滤案例案例1:案例2:3.2简单事件3.3事件修饰符3.4按键修饰符4.数据双向绑定4.1v-model使用5.表单控制5.1 checkbox选中5.2 多选5.3 单选5.4 购物车案例5.
vue模板语法、列表渲染、条件渲染、 事件、单项 和 双向数据绑定
qq_44920739的博客
04-17 318
1.vue.js源代码 . vue.js源代码 匿名函数 (function(){}) () 特点 安全性高 减少了函数命名冲突 第二个括号才是函数的真正运行， 里面可以传入实际参数 第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数 底层代码封装 匿名函数作用 确定vue.js这个库的使用方法 直接将Vue当做全局的一个方法...
条件渲染，列表渲染，事件处理，表单控件绑定
qq_41369286的博客
08-25 152
2.3 条件渲染 v-if v-else-if v-else v-show 条件展示 条件渲染 - 单路分支 A ​ ​ 条件渲染 - 双路分支 A B ​ ​ 条件渲染 - 多路分支 美食 游戏 睡觉 ​ 条件展示 ​ 条件展示 思考总结 思考： v-if vs v-show 1. 效果看起来一样 2. why Vue要出两个相似的...
Vue 条件渲染&列表渲染&事件处理&表单绑定
qq_44718666的博客
07-22 484
Vue 条件渲染 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no ????</h1> 在 template 元素上使用 v-
156-vue02-条件渲染 事件处理和表单控制
Pinkman2k的博客
12-15 111
昨日回顾 1 vue:js框架,渐进式 2 mvvm架构,数据双向绑定(有些小坑),组件化开发,单页面开发 3 使用:cdn引入,下载下来导入,工程化(vue-cli创建vue工程),脚手架 4 插值{{ 变量,js语法,三目 }} 5 指令 v-xx指令,放在标签上的自定义属性 v-html v-text v-on:@click 缩写@click v-bind:属性名='属性值' 缩写 :属性名='属性值js变量' v-if:dom的删除和插入 v-show:样式
vue核心技术（二）综合案例-购物车
最新发布
02-11
Vue提供了`v-model`指令，用于实现表单控件（如输入框、选择器）与数据模型之间的双向绑定。在购物车中，这可以用来同步商品的数量更改。 8. **路由（Vue Router）**： 如果购物车是整个应用的一部分，那么Vue ...
vue实现购物车加减
10-15
综上所述，Vue实现购物车加减功能涉及到了数据绑定、计算属性、事件处理、列表渲染、方法定义等多个关键点，这些是构建任何Vue应用的基础。通过理解和熟练运用这些概念，可以构建出功能丰富且易于维护的前端应用。
vue购物车商品累加结算代码
04-07
在Vue.js框架中实现购物车商品累加结算功能是一项常见的任务，这涉及到多个技术知识点，包括数据绑定、计算属性、事件处理以及组件通信等。以下将详细解释这些关键概念。 1. **数据绑定**：Vue.js的核心特性之一是...
vue仿饿了么购物车
08-13
9. **条件渲染与列表渲染**：Vue的`v-if`和`v-for`指令可以用于根据条件显示或循环渲染元素。购物车中的商品列表和选中状态显示都需要用到这些特性。 10. **表单处理**：Vue提供了`v-model`指令方便地与表单元素...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
3. **数据绑定**: Vue的核心特性之一就是双向数据绑定，通过`v-bind`指令可以将HTML元素的属性与Vue实例的数据关联起来，而`{{ }}`插值表达式用于显示数据。 4. **计算属性与侦听器**: 计算属性允许你在模板中使用...
5.vue基础（四）条件渲染-列表渲染
qq_41634943的博客
04-22 1801
文章目录1.条件渲染、1.1 v-if1.2 v-show2.列表渲染2.1 遍历数组2.2 遍历对象2.3 key的原理2.3.1 向列表添加内容(push(),unshift())2.3.2 从列表删除内容(pop(),shift())2.3.3 添加对象案例2.4 列表过滤2.4.1 筛选数组元素(filter().indexOf())2.4.2 姓名筛选案例2.5 列表排序2.5.1 列表排序的函数(sort())2.5.2 根据年龄排序2.6 vue数据监测2.6.1 添加属性2.6.2 总结
Vue基础语法之条件渲染(v-show,v-if)
weixin_45608136的博客
08-16 216
案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root">
Vue-渲染：条件渲染、列表渲染
mantou_riji的博客
07-16 756
显示与隐藏。 表示显示 表示隐藏 实现原理：调用来控制显示与隐藏 控制台显示： v-show的值当然也可以是返回值为true或false的表达式。v-if也可以控制显示与隐藏 表示显示 表示隐藏 实现原理：将整个结构删除 控制台显示： 所以 v-if比v-show的消耗更大和 一起使用，和 的用法一样： 先判断v-if是否满足条件，如果不满足再判断 v-else-if是否满足条件 v-else 和else用法一样，和 v-if，v-else-if 一起用： 当v-if，v-else-if 都不满足条件
VUE条件渲染
weixin_43228946的博客
09-03 895
VUE的条件选可以使用v-show或者v-if、v-else-if、 "true/false"来实现。 v-show的用法如下： v-show = "true(表达式)"：表示可见 v-show = "true(表达式)"：表示不可见，一旦在某个元素这样设置，那么这个元素就会从我们视觉里消失，但是他的元素节点的结构依然存在。 v-if、v-else-if、v-else： v-if = "true/false(表达式)"、v-else-if = "true/false(表达式)"、 v-else后面不用表达
2、Vuestyle属性的绑定、事件处理、条件渲染、列表渲染
ShawnYue_08的博客
08-01 392
文章目录style属性绑定事件处理事件处理方法事件修饰符阻止冒泡阻止默认行为事件触发一次按键修饰符条件渲染v-ifv-else-ifv-show列表渲染遍历数组遍历对象数组更新检测循环案例 style属性绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id
vue实战记录（三）- vue实现购物车功能之渲染商品列表
sueRimn的博客
01-30 2094
vue实战记录（三）- vue实现购物车功能之渲染商品列表 vue实战，一步步实现vue购物车功能的过程记录，课程与素材来自慕课网，自己搭建了express本地服务器来请求数据 作者：狐狸家的鱼 本文链接：vue实战-实现购物车功能（三） GitHub：sueRimn  模仿网页考拉的购物车样式进行了一些修改，以上图片就是渲染后的效果。 一、cart.js获取数据 通过AJA...
小程序：组件使用、数据绑定、条件渲染、列表渲染
tomorrownan的博客
05-31 2143
准备工作： 新建一个quickstart项目，然后再pages目录下自己新建一个页面，例如t文件夹名为test，再在其下分别新建test.wxml、test.js、test.wxss文件。最后在app.json全局配置文件中配置test页面路径，项目结构如下： 1.组件的基本使用 小程序开发文档中组件部分有很多组件介绍，包含视图容器类组件，基础内容类组件、表单组件、导航组件、媒体组件、地图组件和...
vue项目之购物流程
weixin_47409897的博客
10-14 560
目录vue 项目之购物流程首页商品展示商品详情页vuex中的数据 vue 项目之购物流程 首页商品展示 使用宫格组件，实现首页商品的两列展示 https://vant-contrib.gitee.io/vant/#/zh-CN/grid 属性介绍 column-num 展示的列数 @click="gotoDetails(value._id)" 点击去往详情页 一般来说，在created钩子函数之中，获取到商品数据，因为这时候的数据是已经初始化好了 然后把这些数据，存储在data之中，用于列表
渲染页到详情页到加入购物车
zdzdzd99的博客
03-25 1397
1、渲染 拿到数据放在自己的data渲染 data（）{ headerList: [] } :class="tabid == index ? 'active' : ''" //tabid点击时的下标 index是数组下标 active是选中时状态 分类功能： @click="handfenl(item.Value, index)" //实参是对比接口地址之后传不同的参数 handfenl(idx, index) { this.tabid = index; //下标 this.categ.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值