【Vue】Re02 指令：第一部分

一、v-once指令

用于固定一次性赋值，后续Vue实例的赋值更改将不再对v-once指令的元素有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 列表显示 -->
<div id="vue-application">
    <h3>Vue v-once指令</h3>
    <p>没有加入v-once属性，可以随意更改 -> {{variable}} </p>
    <p v-once>加入了v-once属性，不可以随意更改 -> {{variable}} </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let v = new Vue({
        el : '#vue-application',
        data : {
            variable : '这是测试v-once的变量'
        }
    });
</script>

</body>
</html>

二、v-html指令

用于将属性数据中的文本字符可以被浏览器解析到HTML代码

说简单点，可以被转义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue-application">
    <h3>Vue v-html指令</h3>
    <p>没有加入v-html指令，不会被浏览器解析 -> {{variable}} </p>
    <p >加入了v-html指令，会被浏览器解析 -> <span v-html="variable"></span> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let v = new Vue({
        el : '#vue-application',
        data : {
            variable : '<h2>这是测试v-once的变量</h2>'
        }
    });
</script>

</body>
</html>

三、v-text指令

仅用于输出显示纯文本内容，HTML代码将不会被转义处理

一般怎么使用，因为我们还希望动态的来处理，而v-text只能一次性处理

所以一般采取mustache语法结合其他固定文本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue-application">
    <h3>Vue v-html指令</h3>
    <p>原始mustache语法等同于v-text -> {{variable}} </p>
    <p>加入了v-text指令，不会会被浏览器解析 -> <span v-text="variable"></span> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let v = new Vue({
        el : '#vue-application',
        data : {
            variable : '<h2>这是测试v-once的变量</h2>'
        }
    });
</script>

</body>
</html>

四、v-pre指令

用于越过mustache语法不注入属性数据，仅显示元素原本的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./../dependencies/vue-min.js"></script>
</head>
<body>
<!-- 跳过该元素和子元素的Vue编译 -->
<div id="vue-application">
    <h3>Vue v-html指令</h3>
    <p>无pre编译渲染 {{varA}}<span>{{varB}}</span></p>
    <p v-pre >有pre编译渲染 {{varA}}<span>{{varB}}</span></p>
</div>

<script type="text/javascript">
    let v = new Vue({
        el : '#vue-application',
        data : {
            varA : '变量A',
            varB : '变量B',
        }
    });
</script>

</body>
</html>

五、v-cloak指令

cloak意思斗篷，遮挡之意，在Vue应用中是

解决浏览器响应过慢，vue来不及渲染出现mustache的标记【插值闪烁的问题】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./../dependencies/vue-min.js"></script>
    <style type="text/css"> /*  解决浏览器响应过慢，vue来不及渲染出现mustache的标记  */
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

</body>
</html>

六、v-bind指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="vue-app">
    <h3>动态v-bind测试</h3>
    <p> <a v-bind:href="newLink">v-bind 链接测试</a> </p>
    <p> <a :href="newLink">v-bind 链接缩写语法测试</a> </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el : '#vue-app',
        data : {
            newLink : 'https://www.baidu.com'
        },
        filters : {
            customFilter(v) {
                if ( 10 <= v && v <= 100) {
                    return '非法的值'
                }
                return v;
            }
        }
    });
</script>

</body>
</html>

动态绑定class属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .act {
            color: red;
        }
        .line {
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <p :class="sss">DynamicBinding1</p>
    <!--
        v-bind 动态绑定的方式 <tag :class="{ 类名1 : boolean, 类名2 : boolean }">文本值</tag>
    -->
    <p :class="{act : true, line : false}">DynamicBinding2</p>

    <!-- 利用data选项属性可以进行动态渲染 -->
    <p :class="{act : activateAct, line : activateLine}">DynamicBinding3</p>

    <!-- 还可以将已有的class属性进行合并处理 -->
    <p class="aaa" :class="{act : activateAct, line : activateLine}">DynamicBinding4</p>

    <!--
        如果太长不便于阅读，可以使用函数进行设置
        要注意assignmentCssClass是需要添加括号表示一个函数，且无参注入
    -->
    <p class="aaa" :class="assignmentCssClass()">DynamicBinding5</p>

    <!-- 使用数组语法进行渲染处理 -->
    <p class="aaa" :class="assignmentCssClassByList()">DynamicBinding6</p>

    <!-- 使用数组语法进行渲染处理,结合methods赋值 -->

    <p> <button @click="changeCssClass">点击取消样式绑定</button></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el : '#app',
        data : {
            sss : 'act',

            // 用于设置h3标签的class属性，act和line的布尔属性
            activateAct: true,
            activateLine : true
        },
        methods : {
            changeCssClass : function () {
                this.activateAct = !this.activateAct;
                this.activateLine = !this.activateLine;
            },
            assignmentCssClass : function () {
                return { // 交给函数进行赋值处理
                    act : this.activateAct,
                    line : this.activateLine
                }
            },
            assignmentCssClassByList : function () {
                return [
                    'bbb',
                    'ccc',
                    'ddd',
                    'eee',
                    this.activateAct,
                    this.activateLine
                ]
            }
        }

    });
</script>

</body>
</html>

动态绑定css样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!-- v-bind 动态绑定css语法 <tag :style="{ 样式名称 : 值  }" ></tag>  -->
    <h3 :style="{ fontSize : '28px', color : 'red' }">{{message}}</h3>

    <!-- 动态化 -->
    <h3 :style="{ fontSize : pixel }">{{message}}</h3>

    <!-- 或者是经过拼接处理 -->
    <h3 :style="{ fontSize : pixelNum + 'px' }">{{message}}</h3>

    <!-- 使用数组结合对象进行处理 -->
    <h3 :style="[styleObj01, styleObj02]">{{message}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el : '#app',
        data : {
            message : 'dynamic-css',
            pixel : '20px',
            pixelNum : 100,

            styleObj01 : {
                background : 'yellow',
                color : 'green'
            },
            styleObj02 : {
                fontSize : '28px',
            }
        }
    });
</script>

</body>
</html>

结合v-for指令结合的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .color {
            color : red;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 实现点击任意一个列表项进行样式更改-->
    <ul>
        <li v-for="(item, index) in list" :class="{color : current == index}" @click="changeColor(index)">{{index}} {{item}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el : '#app',
        data : {
            current : -1, // 默认位置为0，所以不能取值0而是-1
            list : [
                '列表项1',
                '列表项2',
                '列表项3',
                '列表项4',
                '列表项5',
            ],
        },
        methods : {
            changeColor : function (i) {
                this.current = i;
            }
        }
    });
</script>

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mindzone/p/13877119.html