02. vue条件渲染与列表渲染

最新推荐文章于 2022-08-02 15:34:14 发布
最新推荐文章于 2022-08-02 15:34:14 发布
阅读量236 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49111957/article/details/113901918
版权

vue条件渲染与列表渲染

一、条件渲染

1、通过v-if 和 v-for 实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!-- v-if/v-else实现判断，v-for实现遍历-->
    <ul v-if="shopping_car.length>0">
        <li v-for="data in shopping_car">{{data}}</li>
    </ul>
    <div v-else>购物车空空如也</div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            shopping_car: ['苹果', '羽绒服', '鼠标']
        },
    })
</script>
</html>

2、v-if/v-else-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-if="count==1">1111</div>
    <div v-else-if="count==2">2222</div>
    <div v-else>3333</div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            count: 1
        },
    })
</script>
</html>

二、列表渲染

1、for循环数组、对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>循环数组</h1>
    <div><p v-for="data in arr">{{data}}</p></div>
    <h1>循环对象</h1>
    <div><p v-for="data in obj">{{data}}</p></div>
    <h1>循环数组索引和value</h1>
    <div><p v-for="(data,index) in arr">索引：{{index}}，数据：{{data}}</p></div>
    <h1>循环对象key和value</h1>
    <div><p v-for="(value,key) in obj">key:{{key}},value:{{value}}</p></div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr: ['jason', 'andy', 'cc'],
            obj: {name: 'cc', age: 18, gender: 'male'}
        }
    })
</script>
</html>
image-20201215152130143

2、key值

1、v-for循环数组、对象时，建议在控件、组件、标签上写一个key属性，属性值要唯一
2、页面更新以后，加速dom的替换(渲染)，虚拟dom的替换diff算法
3、格式: 
	:key='变量'   # 要加冒号，否则key值会重复，报错

3、数组更新与检测

0 数据双向绑定:数据变-->页面变;页面变化-->数据也跟着变
1 目前使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动的方法：filter(),concat(),slice(),map()，新数组替换旧数组
	-页面不会更改的示例：vm.arr.concat(['44','55'])
	-解决方案： vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
	-解决方案一：
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
	-解决方案二
		Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法

三、事件处理

# blur: 失去焦点触发
# change: 失去焦点触发
# input： 数据发生变化，就会触发

1、input过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myinput" @input="handleChange"> {{myinput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myinput: '',
            arr: ['aabb', 'aadf', 'qwer', 'xyz'],
            new_arr: ['aabb', 'aadf', 'qwer', 'xyz'],

        },
        methods: {
            handleChange() {
                console.log(this.myinput)
                // 数据双向绑定了，控制arr的变化，页面就会变化
                this.new_arr = this.arr.filter(item => {
                    return item.indexOf(this.myinput) > -1
                })
            }
        }
    })
</script>
</html>
image-20201215182556717

2、简单事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <button @click="isShow=!isShow">点击折叠/展开</button>
    <button @click="handleClick">点击折叠/展开</button>
    <button @click="handleClick($event)">点击折叠/展开,传递event事件</button>
    <div v-show="isShow">
        窗前明月光
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            isShow: true,
        },
        methods: {
            handleClick(ev) {
                console.log(ev)
                this.isShow = !this.isShow
            },

        }
    })
</script>
</html>

3、事件修饰符

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

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
        <ul @click.self="handleUl">
<!--        <ul @click="handleUl">-->
            <h1>event传递事件</h1>
            <!--        <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
            <h1>.stop阻止事件冒泡</h1>
            <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>
            <h1>没有加.stop，但是父组件只处理自己的事件</h1>
            <li v-for="data in datalist" @click="handleLi">{{data}}</li>
            <h1>.once</h1>
            <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
        </ul>
        <a href="http://www.baidu.com" @click.prevent="handleA">点击</a>

</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            datalist: ['aaa', 'bbb', 'ccc']
        },
        methods: {
            // handleLi(ev) {
            //     console.log('li被点击了')
            //     ev.stopPropagation()  //点击事件停止向父组件传递
            // },
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('Ul被点击了')
            },
            handleA() {
                console.log('a被点击了')
            }
        }
    })
</script>
</html>

4、按键修饰符

敲击回车键，执行一件事

# 键盘修饰符:
    .enter ：回车键
    .tab ：制表键
    .delete ：含 delete 和 backspace ...
    .esc ：返回键
    .space: 空格键
    .up ：向上键
    .down ：向下键
    .left ：向左键
    .right ：向右键
# 鼠标修饰符
	鼠标修饰符用来限制处理程序监听特定的滑鼠按键。常见的有：
    .left：鼠标左键
    .middle：鼠标中间滚轮
    .right：鼠标右键
# 修饰键
    可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应：
    .ctrl
    .alt
    .shift
    .meta
格式：
	@keyup.enter="函数名"
image-20201215193404246

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myInput" @keyup.enter="handleKey">
    <!--与上面的作用是一样的-->
    <input type="text" v-model="myInput" @keyup.13="handleKey">
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myInput: ''
        },
        methods: {
            handleKey() {
                console.log('回车')
            }
        }
    })
</script>
</html>

四、数据双向绑定

1、v-model使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myInput">
    <br>
    {{myInput}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
    <br>
    {{text}}
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myInput: '',
            text: ''
        },
    })
</script>
</html>
image-20201215193951623

五、表单控制

1、checkbox选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之checkbox</h1>
    <input type="checkbox" v-model="check">记住密码
    <br>
    {{check}}
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            check: true,
        },
    })
</script>
</html>

2、checkbox多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之checkbox多选</h1>
    <h3>你最爱的女明星</h3>
    <input type="checkbox" v-model="checkgroup" value="郭德纲">桥本有菜
    <input type="checkbox" v-model="checkgroup" value="冯小刚">相泽南
    <input type="checkbox" v-model="checkgroup" value="潘长江">大桥未久
    <br>
    {{checkgroup}}

</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            checkgroup: [],
        },
    })
</script>
</html>
image-20201215203558448

3、radio单选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之radio单选</h1>
    <input type="radio" v-model="sex" value="male">男
    <input type="radio" v-model="sex" value="female">女
    <input type="radio" v-model="sex" value="unknown">未知
    <br>
    {{sex}}


</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            sex: '',
        },
    })
</script>
</html>
image-20201215203947595

4、购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之radio单选</h1>
    <ul>
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup">
            {{item}}
        </li>
    </ul>
    <br>
    购物车：{{checkgroup}}
    <br>
    当前总价：{{getPrice()}}
</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: 'apple', price: 100, number: 1, id: '1'},
                {name: 'orange', price: 88, number: 2, id: '2'},
                {name: 'banana', price: 10, number: 5, id: '3'}
            ],
            checkgroup: [],
        },
        methods: {
            getPrice() {
                var sum_price = 0
                for (i in this.checkgroup) {
                    sum_price += this.checkgroup[i]['number'] * this.checkgroup[i]['price']
                }
                return sum_price
            }
        }
    })
</script>
</html>
image-20201215213013238

5、购物车全选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之radio单选</h1>
    <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
    <ul>
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
            {{item}}
        </li>
    </ul>
    <br>
    购物车：{{checkgroup}}
    <br>
    当前总价：{{getPrice()}}

</div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: 'apple', price: 100, number: 1, id: '1'},
                {name: 'orange', price: 88, number: 2, id: '2'},
                {name: 'banana', price: 10, number: 5, id: '3'}
            ],
            checkgroup: [],
            isAll: false,
        },
        methods: {
            getPrice() {
                var sum_price = 0
                for (i in this.checkgroup) {
                    sum_price += this.checkgroup[i]['number'] * this.checkgroup[i]['price']
                }
                return sum_price
            },
            handleCheck() {
                if (this.isAll) {
                    this.checkgroup = this.datalist
                } else {
                    this.checkgroup = []
                }
            },
            handleOne() {
                console.log('选中:', this.checkgroup.length);
                console.log('总数据:', this.datalist.length);
                if (this.checkgroup.length == this.datalist.length) {
                    this.isAll = true
                } else {
                    this.isAll = false
                }
            }
        }
    })
</script>
</html>

6、购物车数量控制加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <h1>表单相关之radio单选</h1>
    <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
    <ul>
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
            {{item}}
            <button @click="handleReduce(item)">-</button>
            {{item.number}}
            <button @click="item.number++">+</button>
        </li>
    </ul>
    <br>
    购物车：{{checkgroup}}
    <br>
    当前总价：{{getPrice()}}

</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: 'apple', price: 100, number: 1, id: '1'},
                {name: 'orange', price: 88, number: 2, id: '2'},
                {name: 'banana', price: 10, number: 5, id: '3'}
            ],
            checkgroup: [],
            isAll: false,
        },
        methods: {
            getPrice() {
                var sum_price = 0
                for (i in this.checkgroup) {
                    sum_price += this.checkgroup[i]['number'] * this.checkgroup[i]['price']
                }
                return sum_price
            },
            handleCheck() {
                if (this.isAll) {
                    this.checkgroup = this.datalist
                } else {
                    this.checkgroup = []
                }
            },
            handleOne() {
                console.log('选中:', this.checkgroup.length);
                console.log('总数据:', this.datalist.length);
                if (this.checkgroup.length == this.datalist.length) {
                    this.isAll = true
                } else {
                    this.isAll = false
                }
            },
            handleReduce(item) {
                if (item.number <= 1) {
                    alert('数量超出范围')
                    item.number = 1
                } else {
                    item.number--
                }
            }
        }
    })
</script>
</html>

7、v-model之lazy，number，trim

lazy：输入的内容不会立马跟vue的数据做交互，提升效率，当光标移出或者按回车键的时候会交互
number:只提取前面输入的数字，数字后面跟的字符不接受
trim：移除两边的空白字符

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model.lazy="myText">||{{myText}}
    <br>
    <input type="text" v-model.number="myNumber">||{{myNumber}}
    <br>
    <input type="text" v-model.trim="myTrim">||{{myTrim}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myText: '',
            myNumber: '',
            myTrim: '',
        }
    })
</script>
</html>
知行合一cc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js列表渲染绑定jQuery插件的正确姿势
10-19
主要为大家详细介绍了Vue.js列表渲染绑定jQuery插件的正确姿势，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE2 条件渲染与列表渲染
DTCloud
04-24 293
条件渲染 v-show 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉了。 <div v-show="flag"></div> <script> data(){ return{ flag: true } } <script> v-if/v-else-if/v-else v-if/v-else-if/v-else要紧挨在一起。 特点：不展示的DOM元素直接被移除。 <div
vue 编码但不渲染的标签 vue-fragment
zhangquanming123的博客
08-02 1219
用fragment这个技术的原因,主要是为了把fragment当成根节点然后循环template标签。因为vue默认的template不能在根节点循环但我又不想再去渲染多余的标签。这个问题我是在循环elementNavMenu导航菜单时发现的。vue下载包npmi-svue-fragment。在main.js里添加代码。...
Vue中的无渲染组件
W3cplus
03-30 1475
特别声明：此篇文章内容来源于@Adam Wathan的《Renderless Components in Vue.js》一文。不知道您是否以前有过在第三方组件库中提取过组件的经历，在提取组件的过程中发现需要做一些小的调整，而且也避不开提取整个包。比如像自定义的下拉框，日历或自完匹配等组件，而这些组件可能非常的复杂，需要处理许多意想不到的边界情况。有很多库在处理这些复杂边界情况做得很好，但是它们通常
Vue 条件渲染&列表渲染&事件处理&表单绑定
qq_44718666的博客
07-22 478
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-
Vue2.0流式渲染中文乱码问题
dianwo1613的博客
10-22 836
在参照vue2.0中文官方文档学习服务端渲染之流式渲染时，因为响应头默认编码类型为GBK，而文件为UFT-8类型，所以出现了中文乱码问题。 解决办法：设置响应头编码类型即可 response.setHeader("Content-type", "text/html;charset=UTF-8"); server.get('*',function(request,respons...
深入理解Vue 的条件渲染和列表渲染
08-29
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.JS入门教程之列表渲染
10-21
主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
你不可不知的Vue.js列表渲染详解
10-16
主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue.js学习教程之列表渲染详解
10-19
主要给大家介绍了关于Vue.js列表渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
02-Vue基础之条件渲染和列表渲染
06-05 371
条件渲染和列表渲染
html可以用vue渲染吗,vue条件渲染和列表渲染
weixin_33929779的博客
06-16 943
在vue中我们可以使用v-if语句进行条件渲染，用v-for指令根据一组数组的选项列表进行渲染。本文就来为大家详细介绍一下vue中的条件渲染和列表渲染。一、条件渲染1、v-if语句hahahah如果seen为true，则显示，如果seen为false，则不显示2、v-if和v-else语句123456如果seen为true，则显示123，如果seen不为真，则显示4563、v-if、v-else-...
8-22vue-day1
lianzhangsiqi的博客
08-22 8264
一、课程介绍 NodeJS&npm（了解） ES6重要语法（掌握） Vue介绍（了解） Vue安装（了解） MVVM架构详解（了解） Vue入门（掌握） Vue表达式（掌握） ES6重要语法（掌握） let与const <script> /* let a = 123; let a = 456; console.debug(a)*/ ...
前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
weixin_33889665的博客
01-02 278
一、条件渲染 1.1、v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： &lt;!-- Handlebars 模板 --&gt; {{#if ok}} &lt;h1&gt;Yes&lt;/h1&gt; {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： &lt;h1 v-if="ok"&gt;Yes&lt;/...
智慧管廊项目建设解决方案PPT.pptx
06-14
智慧管廊项目建设解决方案PPT.pptx
数据中台解决方案.pptx
06-14
数据中台解决方案.pptx
用友集团财务管理系统解决方案.pptx
06-14
用友集团财务管理系统解决方案.pptx
Visual Basic编程：顺序结构程序设计
06-14
Visual Basic编程：顺序结构程序设计
基于单片机控制的井下低爆综合保护系统的设计
最新发布
06-14
本次设计是应济源市煤炭高压开关有限公司的要求而专门开发的，为济源煤炭高压开关有限公司在低压领域内的一个新项目。本设计深入研究了矿井下低压电网，有针对性的分析了井下低压电网的选择性漏电、直流检漏、短路等方面存在的问题，利用高档8位单片机，结合电力系统继电保护技术和智能电器技术，提出了矿井低压电网智能综合保护的控制技术和保护方法，并将其应用到矿井低压电网中，试验结果表明所提出的保护设计方法正确、有效、实用。 本设计研制的井下低爆综合保护系统(暂定名为BZD低压开关智能综合保护器.简称BZD保护),依据MT871-2000《矿用隔爆型低压交流真空馈电开关》标准，符合济源煤炭高压开关有限公司提供的技术要求，能对低压电网中出现的短路、过载、过压、欠压、漏电等故障进行实时检测，并有方便的两键参数设定和全中文液晶显示功能。
Vue列表渲染
05-28
Vue 中的列表渲染可以使用 `v-for` 指令来实现。下面是一个简单的示例： ```html (item, index) in items" :key="index">{{ item }} ``` 上面的代码中，`v-for` 指令遍历了 `items` 数组，并将每个元素渲染为一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值