Vue之常用指令

一、概述

  1、指令是指vue对象的绑定标签内通常有 v- 前缀的特殊属性,每种指令代表一种特殊功能。

  2、指令连接着data数据与html显示数据,是同步更改的。

  3、部分指令在vue不同版本中书写的区别,vue1.0+的指令可以在vue2.0+中沿用,反之则不能。

    ①对标签内置属性的操作:v-bind: 属性名 ===> : 属性名。 

    ②绑定事件:v-on: 事件名 ===> @事件名。

二、内置属性赋值

  1、基本表达式:<标签名 :属性名="data键名">

  2、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <p><a :href="url">百度a>p>
    <p><input :type="type">p>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            url: 'https://www.baidu.com',
            type: 'password',
        },
    })
script>
body>
html>
View Code

三、绑定事件

  1、基本表达式:<标签名 @事件名="js表达式/vue方法属性名">

  2、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <p><input type="button" @click="num++" value="+">p>
    <p><input type="button" @click="cut" value="-">p>
    <p><span>{{num}}span>p>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num: 0,
        },
        methods: {
            cut: function () {
                this.num--
            }
        }
    })
script>
body>
html>
View Code

四、控制class属性

  1、基本表达式:<标签名 : class="data键名/{class名:true, class名: false}/对象式data/数组套对象式data">

  2、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
    <style>
        .cls1 {
            border: orange 5px solid;
        }

        .cls2 {
            color: dodgerblue;
        }

        .cls3 {
            background: lightpink;
        }
    style>
head>
<body>
<div id="id_div1">
    <div :class="css1">div1div>
    <div :class="{cls2:false, cls3:true}">div2div>
    <div :class="css2">div3div>
    <div :class="[css1, css2]">div4div>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            css1: 'cls1',
            css2: {
                cls2: true,
                cls3: false,
            },
        },
    })
script>
body>
html>
View Code

五、控制style属性

  1、直接在data中写style属性。

  2、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div :style="style1">div1div>
    <div :style="[style1, style2]">div2div>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            style1: {
                color: 'red',
            },
            style2: {
                border: '3px orange solid'
            }
        },
    })
script>
body>
html>
View Code

六、条件指令之v-if

  1、基本表达式:<标签名 v-if="条件表达式/布尔值">

  2、可以搭配若干个v-else-if和最多一个v-else一起使用。

  3、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div v-if="num <= 4">工作日div>
    <div v-else-if="num == 5">周五div>
    <div v-else-if="num == 6">周六div>
    <div v-else="num == 7">周日div>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            num: new Date().getDay()
        },
    })
script>
body>
html>
View Code

七、条件指令之v-show

  1、基本表达式:<标签名 v-show="条件表达式/布尔值">

  2、用法与v-if大致相同。

  3、与v-if的区别:

    ①没有组合用法。

    ②v-if条件为假时是删除标签,而v-show只是隐藏标签。

  3、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div v-if="false">div1div>
    <div v-show="false">dvi2div>
    <div>{{msg}}div>
div>
<script>
    var tag = document.getElementById('id_div1').children.length
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            msg: tag
        },
    })
script>
body>
html>
View Code

八、列表指令

  1、基本表达式(数组式):<标签名 v-for="临时变量名, 索引 in 数组式data">,可以不用索引。

  2、基本表达式(对象式):<标签名 v-for="键, 值 in 对象式data">,可以不用键。

  3、实例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="vue.min.js">script>
head>
<body>
<div id="id_div1">
    <div>
        <p v-for="l in list1">{{l}}p>
    div>
    <div>
        <p v-for="l, index in list1">{{index}} : {{l}}p>
    div>
    <dvi>
        <p v-for="v in dict1">{{v}}p>
    dvi>
    <div>
        <p v-for="k,v in dict1">{{k}} : {{v}}p>
    div>
div>
<script>
    var vueObj = new Vue({
        el: '#id_div1',
        data: {
            list1: [
                'tom',
                'jan',
                'pik'
            ],
            dict1: {
                name: 'tom',
                age: 18,
                gender: 'male'
            }
        },
    })
script>
body>
html>
View Code

 

你可能感兴趣的:(Vue之常用指令)