VUE--插值的操作

时间:2019-10-19
本文章向大家介绍VUE--插值的操作，主要包括VUE--插值的操作使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、vue常见的指令

  1. v-once：保留第一次渲染结果
  2. v-html ：把html代码解析，只显示内容
  3. v-pre ：原样输出
  4. v-cloak ：解决文本闪烁问题
  5. v-text　：显示文本

二、v-bind指令两种写法   作用：动态绑定属性 

  1. <a v-bind:href="url">百度</a>
  2. <a :href="url">百度</a>

1、v-bind动态绑定class(对象语法)

    <a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>
    <a :href="url" class="title" :class="getClasses()">百度</a>

2、v-bind动态绑定class:(数组语法)

<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>

*********完整代码************

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            color: red;
        }

        .line {
            background: #666;
        }
    </style>
</head>
<div id="app">
    <a v-bind:href="url">百度</a>
    <!-- 动态绑定class{对象语法} -->
    <a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>
    <a :href="url" class="title" :class="getClasses()">百度</a>

    <!-- 动态绑定class[数组语法] -->
    <h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
    <h2 :class="getClassArray()">{{message}}</h2>
    <h2></h2>
    <button v-on:click="getClass">按钮</button>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: '王者不可阻挡',
                url: 'https://www.baidu.com/',
                isActive: true,
                isLine: true,
                classaArray: 'active',
                classaArray2: 'line'
            }),
            methods: {
                getClass: function () {
                    this.isActive = !this.isActive
                },
                getClasses: function () {
                    return { active: this.isActive, line: this.isLine }
                },
                getClassArray: function () {
                    return [this.classaArray, this.classaArray2]
                }
            }
        })
    </script>
</body>

</html>

3、v-bind动态绑定style(对象语法)

<!-- <h2 :style="{ker(属性名):value(属性值)}">{{message}}</h2> -->
    <h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>

4、v-bind动态绑定style(数组语法)

<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>

*******完整代码*******

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <!-- v-bind动态绑定style（对象写法） -->
    <!-- <h2 :style="{ker(属性名):value(属性值)}">{{message}}</h2> -->
    <h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>
    <h2 :style="getStyle()">{{message}}</h2>

    <!-- v-bind动态绑定style（数组写法） -->

    <h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                message: '爱生活，爱自己',
                color: 'green',
                fontSize: '50px',
                baseStyle: {
                    background: 'red'
                },
                baseStyle2: {
                    color: 'pink'
                }
            }),
            methods: {
                getStyle: function () {
                    return { color: this.color, fontSize: this.fontSize }
                }
            }
        })
    </script>
</body>

</html>

原文地址：https://www.cnblogs.com/DreamchaserHe/p/11686943.html

随机文章
Javascript知识点必读
最近更新