vue的一些笔记

落日映苍穹つ 2022-11-19 07:54 156阅读 0赞

整理一些使用到的vue笔记，因为记性不好，经常忘记，所以做做笔记。**大佬请略过**。

好记性不如烂笔头。

**vue中的三目运算**

<img :src="a==1 ? img1 : a==2 ? img2 : img3 " alt="">
    
    <div>{
       {text==1 ? text1 : text2}}</div>
    
    <div :class="isUser==1 ? 'col28' : 'col999' "></div>
    
    <div :class="isUser==1 ? 'use'+isUser : 'use'+isUser "></div>
    <style>
        .col28{
            color:#282828;
        }
        .col999{
            color:#999999;
        }
        .use1{
            ...
        }
        .use2{
            ...
        }
    </style>

**vue在标签的style中的使用（class也是一样用法）**

<h1 class="title" :style="'color:'+color">早上好！</h1>
    
    <h1 class="title" :style="{color:`${color}`,fontSize:`${size}`}">早上好！</h1>
    
    <h1 class="title" :style="useColor==1 ? 'color:'+color1 : 'color:'+color2 ">早上好！</h1>
    <h1 class="title" :style="{color:`${useColor==1 ? color1 : color2}`}">早上好！</h1>
    <script>
    export default{
        data(){
            return{
                color:'red',//也可以rgb或者#fff
                size:'16px',
                useColor:1,
                color1:'red',
                color2:'#F27825',
            }
        }
    }
    </script>

**vue中，数据绑定的使用**

<div>{
       {parseInt(num)}}</div>
    
    <div>{
       {str.split('.')[0]}}</div>
    
    <div>{
       {str.replace(/w/g,'x')}}</div>
    <script>
    export default{
        data(){
            return{
                num:66.99,
                str:'www.com'
            }
        }
    }
    </script>

**vue的页面跳转，获取上个页面传过来的参数**

**router.js（**vue-router需要用npm下载模块，命令行：**npm install vue-router --save****）**

import Vue from  'vue'
    import Router from  'vue-router'
    import Index from  './views/index.vue'
    import My from  './views/my.vue'
    
    Vue.use(Router)
    
    export default new Router({
        routes: [
            {path: '/',component: Index},
            {path: '/my/:id',component: My},
        ]
    })

注：在My那，path: '/my/:id'后面的:id是要跳转到my页面时，带的参数

**a.**用**router-link**跳转

**index.vue**

<router-link to="/my/996"></router-link>

然后在my.vue页面获取id（996）

**my.vue**

mounted(){
        console.log(this.$route.params.id)//996
    }

**b.**在script中用**push**

**index.vue**

<template>
        <div @click="my">跳转我的</div>
    </template>
    <script>
        my(){
            this.$router.push({
              path: `/my/999`,
            })
        }
    </script>

获取参数和上面一样

**c.**在script使用**push**，但是传参用**query**

**index.vue**

<template>
        <div @click="my">跳转我的</div>
    </template>
    <script>
        my(){
            this.$router.push({
                path: '/my',
                query:{
                  id:996  
                }
            })
        }
    </script>

**my.vue(**获取就和上面不一样**)**

mounted(){
        console.log(this.$route.query.id)//996
    }

以后会慢慢增加修改。