vue基础（数据与属性绑定）

苏清辞

已于 2022-03-17 17:08:22 修改

阅读量1k

点赞数 2

文章标签： vue.js javascript elementui

于 2022-03-17 15:11:38 首次发布

本文链接：https://blog.csdn.net/zh15930366635/article/details/123549935

版权

vue是数据驱动的框架

不要总想着编写dom代码，而是通过改变data中的变量的值二改变页面中的数据。

一、内容绑定

1.插值表达式

使用{{}}，在双花括号里面编写data中的变量名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span>{{msg}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"helo word"
            }
        })
    </script>
</body>
</html>

2.v-html绑定

使用v-html绑定属性，不需要{{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-html="msg"></span>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:"helo word"
            }
        })
    </script>
</body>
</html>

二、绑定属性

如果希望html标签的某个属性的值来自data中的某个属性的值，需要使用v-bind：属性名称=“data中的某个属性”

如果不加v-bind的，则vue只有将属性的值当做普通字符串，而不会当做data中的某个属性

v-bind可以简写为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span :id="id">span的id</span>
        <div v-bind:class="red"></div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                id:"aaa",
                red:"red",
            }
        })
    </script>
</body>
</html>

三、双向绑定与单项绑定

1.单项绑定：

data中的变量的值发生变化，页面绑定这个变量的地方的值也会自动的刷新（插值表达式换和v-html都属于单项绑定）

2.双向绑定：

1.data中变量的值发生变化，页面从新渲染。

2.从页面中改变值，data中对应的变量值也发生变化。

3.使用v-model=" "，来进行双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <span >{{msg}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                msg:""
            }
        })
    </script>
</body>
</html>

3.为多个单选按钮的v-model指令的值设置为同一个data中的变量，就会产生选择时的互斥效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <input type="radio" name="" id="man" value="man" id="" v-model="a">
        <label for="man">男</label>
        <input type="radio" name="" id="woman" value="woman"  v-model="a">
        <label for="woman">女</label>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                a:""
            }
        })
    </script>
</body>
</html>