vue的一些笔记

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

好记性不如烂笔头。

vue中的三目运算

<!-- 在标签内使用，要加 : 例如src等 -->
<img :src="a==1 ? img1 : a==2 ? img2 : img3 " alt="">
<!-- 输出展示 -->
<div>{{text==1 ? text1 : text2}}</div>
<!-- class判断使用，要加 : 样式不是动态值的话，要使用''  -->
<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>
<!-- 使用``模板字符串，外层要加{}。有-的样式，例如font-size，要改成驼峰写法 -->
<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>
<!-- js操作，例如切割 -->
<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
}

以后会慢慢增加修改。