首页 > 其他分享 >Vue基础

Vue基础

时间:2023-09-15 15:44:23浏览次数:32  
标签:Vue name gender age 基础 else 数组

一 条件渲染

指令 释义
v-if 相当于: if
v-else 相当于:else
v-else-if 相当于:else if
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if、else if、else</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <h3>案例:if、else if、else</h3>
    <h2 v-if="type==='1'">A</h2>
    <h2 v-else-if="type==='2'">B</h2>
    <h2 v-else>C</h2>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            type: '1',
        }
    })
</script>
</html>

二 列表渲染

1. v-if+v-for+v-else控制购物车商品的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if + v-for + v-else控制购物车商品的显示</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>我的购物车</h2>
    <button @click="show">刷新购物车</button>
    <br><br>
    <table v-if="!shopping_car.length==0">
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr v-for="item in shopping_car">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <table v-else>
        <tr>
            <td>商品名称</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>暂无信息</td>
            <td>暂无信息</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            isActive: false,
            shopping_car: []
        },
        methods: {
            show() {
                this.shopping_car = [
                    {name: 'Threadripper 3990X', price: '29999元'},
                    {name: 'NVIDIA RTX 8000', price: '59999元'},
                    {name: 'ROG ZENITH II EXTREME', price: '9999元'},
                ]
            }
        }
    })
</script>
</html>

2. v-for遍历数组(列表)、对象(字典)、数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍历数组(列表)、对象(字典)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table, td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>数组(列表)for循环遍历</h2>
    <ul>
        <li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
    </ul>

    <h2>对象(字典)for循环遍历</h2>
    <ul>
        <li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
    </ul>

    <h2>数组(列表)套对象(字典)for循环遍历</h2>
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>国籍</td>
        </tr>
        <tr v-for="info in summary_test">
            <td>{{info.name}}</td>
            <td>{{info.age}}</td>
            <td>{{info.gender}}</td>
            <td>{{info.country}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
            dic_test:{name: 'Darker', age: 18, gender: 'male'},
            summary_test: [
                    {name: 'Alan', age: 23, gender: 'male', country: 'America'},
                    {name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
                    {name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
                    {name: 'Darker', age: 18, gender: 'male', country: 'China'},
                    {name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
                ]
        }
    })
</script>
</html>

注意!在Vue中:

  • 数组的indexvalue是反的
  • 对象的keyvalue也是反的

3. key值 的解释

vue中使用的是虚拟DOM,会和原生的DOM进行比较,然后进行数据的更新,提高数据的刷新速度(虚拟DOM用了diff算法)

  • v-for循环数组、对象时,建议在控件/组件/标签写1个key属性,属性值唯一
  • 页面更新之后,会加速DOM的替换(渲染)
  • :key="变量"

4. 数组更新与检测

  • 可以检测到变动的数组操作:
  • push:最后位置添加
  • pop:最后位置删除
  • shift:第一个位置删除
  • unshift:第一个位置添加
  • splice:切片
  • sort:排序
  • reverse:反转

检测不到变动的数组操作:

  • filter():过滤
  • concat():追加另一个数组
  • slice():
  • map():

原因:

作者重写了相关方法(只重写了一部分方法,但是还有另一部分没有重写)

解决方法:

// 方法1:通过 索引值 更新数组(数据会更新,但是页面不会发生改变)
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"


// 方法2:通过 Vue.set(对象, index/key, value) 更新数组(数据会更新,页面也会发生改变)
Vue.set(vm.arrayList, 0, 'Darker')

标签:Vue,name,gender,age,基础,else,数组
From: https://www.cnblogs.com/huangchunfang/p/17705145.html

相关文章

  • vue2原理初探-数据代理和数据劫持
    本篇文章主要想简单聊聊vue如何实现数据修改,页面联动的底层原理。当然,篇幅有限,只是自己一些浅显的认知而已,我会从一下几个方面去聊,希望对你有所帮助。几个基础知识点数据代理数据劫持完整demo 一、几个基础知识点1.普通函数和箭头函数的区别我们知道,每个函数执行都会......
  • Vue2 Modal组件函数式调用封装(基于Ant Design Vue 组件)
    一、h函数(createElement函数)版本importVuefrom"vue";import{Modal}from"ant-design-vue";//获取扩展Modal组件functiongetModalConstructor(modalProps,childConfig){const{component,...restConfig}=childConfig;returnVue.extend({......
  • 一些vue面试题
    1.Vue组件的生命周期有哪些,它们的执行顺序是什么?答:Vue组件的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。它们的执行顺序如下:beforeCreate->created->beforeMount->mounted->beforeUpdate->upda......
  • Knative 基础
    Knative项目简介读音为“kay-nay-tiv”,由Google于2018年7月正式发布Kubernetes平台的原生扩展组件,让其能够轻松地部署、运行和管理Serverless类型的云原生应用由RedHat、Google和IBM等公司,以及各种初创公司组成的开源社区共同维护目标在于Serverless技术标准化Knative是什......
  • 从零开始使用vue2+element搭建后台管理系统(主页)
    登录后,应有一个主页,可以展示当前用户的一些信息,例如上次登录时间地点、修改手机号、重置密码等简单功能,如图:  首先在views下新建HomeView.vue文件:<template><el-row><el-col:span="24"><!--user卡片--><el-card><divclass="user"&g......
  • Vue源码学习(六):(支线)渲染函数中with(),call()的使用以及一些思考
    好家伙, 昨天,在学习vue源码的过程中,看到了这个玩意嘶,看不太懂,研究一下 1.上下文这段出现vue模板编译的虚拟node部分exportfunctionrenderMixin(Vue){Vue.prototype._c=function(){//创建标签returncreateElement(...arguments)......
  • vue实现请再次输入密码的表单校验
     1、获取第一次输入的密码的值2、比较两次密码的值是否相等3、如果不一致返回错误信息this.userInfo.password2:获取第一次输入的密码;value当前校验值;validator自定义校验规则;constConfirmPassword=(rule,value,callback)=>{if(value!==this.userInfo.password2){......
  • Electron-vue项目打包遇坑
    项目背景一个Electron+vue2的桌面应用项目,进行打包使用了vue-cli-plugin-electron-builder将Electron和vue结合直接使用electron-builder打包问题一:打包后,background.js中会出现模块引入报错。Electron是commonJs规范,但使用了ESM规范import{createProtocol}from'vu......
  • 计算机基础
    计算机基础1、Python是什么?Python是一门编程语言。  语言是一种事物与另外一种事物沟通的介质。  所以说编程语言就是程序员与计算机共同的介质。编程语言还有其他分类:2、什么是编程?  就是程序员用计算机所能理解的表达方式(编程语言)把自己的思维逻辑写下来。......
  • less-基础用法
    什么是less?less,suss,stylus都是css的动态扩展语言.三种都大同小异官网:https://less.nodejs.cn/怎么用?与Node.js一起使用:安装:npminstall-gless编译:lesscstyles.lessstyles.css在浏览器使用:<linkrel="stylesheet/less"type="text/css"href=......