vue属性绑定：v-bind指令

最新推荐文章于 2024-10-13 14:36:10 发布

wuliangfan

最新推荐文章于 2024-10-13 14:36:10 发布

阅读量5.1k

点赞数 2

分类专栏： vue相关

本文链接：https://blog.csdn.net/wuliangfan/article/details/96436471

版权

vue相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 基本语法

语法： v-bind:属性名.修饰符="属性值"
简写：：属性名.修饰符 = "属性值"
属性名
- h5中有意义的属性名
- DOM属性名(className,innerHTML) ==>将驼峰转为连字符“-”，并添加修饰符.prop
- vue绑定属性时是以html属性为基准的,h5中是不存在大小写的
属性值： data数据仓库中的变量名
修饰符： prop，用于修饰当绑定的属性为DOM属性时

2. 功能

将标签的属性以vue语法的方式绑定动态数据

3. 特殊属性

boolean属性： input文本框的disabled
- 语法： :disabled="属性值"
- 属性值：JS中可以转换成boolean的一切变量
- 空字符串"" 以及0：返回true, 文本框是禁用状态, 这点不同于原生JS
- null以及undefined: 返回false，文本框是启用状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">

        <input type="text" :disabled="flag">
        <br>
        <br>

        <!-- 需求：点击发送验证码，按钮禁用，按钮文本改为“重新发送(60s)” ，并且后面的数字动态减少，当数字减少到小于等于0时
            按钮重新启用，按钮的文本重新恢复成发送验证码
        -->
        <input type="button" :value="val" :disabled="flag" @click="sendCode">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag: false,
                val:"发送验证码",
                num: 10
                // flag: "", //禁用
                //flag:0, //禁用
                // flag: null, //启用
                // flag: undefined //启用
            },
            methods:{
                sendCode(){
                    //按钮禁用
                    this.flag = true;
                    this.val = "重新发送(" + this.num + "s)";
                    //按钮文本改为重新发送
                    var timer = setInterval(()=>{ //这边必须使用箭头函数，因为这边是作为一个回调函数存在在这里的，回调函数的this是指向于回调函数调用时的上下文，即window,而箭头函数在new对象中是恒指向于new出来的实例的
                        if(this.num <= 0){ //当计时结束后，清除计时器
                            clearInterval(timer);
                            this.flag = false;
                            this.val = "发送验证码";
                            this.num = 10;
                        }else{
                            this.num --;
                            this.val = "重新发送(" + this.num + "s)";
                        }
                    },1000)
                    
                }
            }
        }) 
    </script>
</body>
</html>

class属性
- 语法：：class="属性值" || ：classNam.prop = "属性值"
- 属性值
  - 字符串：实现样式的快速部署，注意样式前需要加空格
  - 数组：实现样式的动态追加，注意删除的时候，没办法控制具体删除哪个样式,只能根据数组中的元素的顺序进行删除
  - 对象：实现样式的互斥,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <style>
        .fc{
            color: red;
        }
        .bc{
            background: #ccc;
        }
        .sta{
            background:#ccc;
        }
        .success{
            background: orange;
        }
        .error{
            background: green;
        }
    </style>
    <title>class属性绑定</title>
</head>
<body>
    <div id="app">
        <!-- 字符串 -->
        <div :class="classStr">属性绑定</div>
        <button @click="addBc">添加背景色</button>
        <!-- 数组 -->
        <div :class="classArr">属性绑定</div>
        <button @click="addBc">添加背景色</button>
        <!-- 对象：【实现功能：文本框默认灰色背景，输入字符数小于等于5个背景色为橙色，大于5个背景色为绿色】 -->
        <input type="text" :class="classObj" @input=changeBc($event)>
    </div>
    <script>
       new Vue({
            el:"#app",
            data:{
                // flag: "", //禁用
                //flag:0, //禁用
                // flag: null, //启用
                flag: undefined, //启用
                classStr:'fc',
                classArr:['fc'],
                classObj:{
                    'sta':true,
                    'success':false,
                    'error':false
                }
            },
            methods:{
                addBc(){
                    // this.classStr += " bc"; //注意：这边bc的前面需要加空格
                    this.classArr.push('bc')
                },
                changeBc(e){
                    console.log(e.target);
                    this.classObj.success =  e.target.value.length <= 5;
                    this.classObj.error =  e.target.value.length > 5;
                }
            }
       }) 
    </script>
</body>
</html>

style属性
- 语法： v-bind:style = "属性值" || ：style = "属性值"
- 属性值
  - 字符串：正常的css样式
  - 对象：多个css样式
  - 数组：将多个对象合并成一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 字符串 -->
        <p :style="styleStr">style属性绑定-字符串</p>

        <!-- 对象 -->
        <p :style="styleObj1">style属性绑定-对象</p>

        <!-- 数组 -->
        <p :style="[styleObj1,styleObj2]">style属性绑定-数组</p>
        
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                styleStr:'color:red',
                styleObj1:{
                    color:"red",
                    border:"1px solid red"
                },
                styleObj2:{
                    backgroundColor:'#ccc'
                }
                
            }
        }) 
    </script>
</body>
</html>