Vue基础之指令、插值表达式

最新推荐文章于 2022-12-27 17:34:44 发布

bugsayend

最新推荐文章于 2022-12-27 17:34:44 发布

阅读量448

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42707967/article/details/111185109

版权

本文详细介绍了Vue的基础指令，包括v-model的使用，如双向绑定表单元素，以及v-bind指令在绑定class对象、数组和style内联样式中的应用。还提到了v-cloak解决闪烁问题以及v-once单次渲染的特点。

摘要由CSDN通过智能技术生成

一.Vue基础指令v-model

1.1 vue中v-bind指令绑定class对象

通过v-bind动态绑定class属性，直接上代码

<!DOCTYPE html>
<html>
    <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">
    </head>
    <style>
        .active {
    
            color:red;
        }
    </style>
    <script src="./vue.js"></script>
    <body>
        <div id="app">
            <p :class="{active: name}">测试段落</p>
        </div>
        <script>
            var vm=new Vue({
    
                el:'#app',
                data:{
    
                    name: true,
                },
                methods:{
    

                }
            })
        </script>
    </body>
</html>

当绑定的class类名中对象的值为true时，类名生效，因为绑定的是对象，所以也可以写成如下方式

<body>
        <div id="app">
            <p :class="obj">测试段落</p>
        </div>
        <script>
            var vm=new Vue({
    
                el:'#app',
                data:{
    
                    obj:{
    active: true, b: true},
                    name: true,
                },
                methods:{
    

                }
            })
        </script>
    </body>

注意点，通过v-bind绑定类名class中对象属性时确保class中绑定的是一个对象

1.2 v-bind绑定class中数组

<body>
        <div id="app">
            <p :class="[name, age]">测试段落</p>
        </div>
        <script>
            var vm=new Vue({
    
                el:'#app',
                data:{
    
                    obj:{
    active: true, b: true},
                    name: 'a',
                    age: 'b'
                },
                methods:{
    

                }
            })
        </script>
    </body>

通过v-bind可以绑定数组，数组中值即为class属性名

1.3 v-bind绑定style内联样式

vue中通过v-bind绑定style的内联样式时也分为对象和数组两种方式

<body>
        <div id="app">
            <p :style="{
      fontSize: a, color:b}">测试段落</p>
        </div>
        <script>
            var vm=new Vue({
    
                el:'#app',
                data:{
    
                    obj:{
    active: true, b: true},
                    a: '20px',
                    b: 'red'
                }

最低0.47元/天解锁文章

bugsayend

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础之指令、插值表达式

一.Vue基础指令v-model1.1 vue中v-bind指令绑定class对象通过v-bind动态绑定class属性，直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m
复制链接

扫一扫

专栏目录