Vue模版语法之属性绑定v-bind

云远12189

已于 2024-02-19 23:44:48 修改

阅读量928

点赞数 6

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2024-02-19 23:28:55 首次发布

本文链接：https://blog.csdn.net/weixin_41575632/article/details/136180045

版权

VUE 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

双大括号不能在 HTML 属性中使用。想要响应式地绑定一个属性，应该使用 v-bind 指令
1. 使用v-bind绑定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建页面</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-bind进行属性绑定-->
        <div v-bind:id="name"></div>
        <!--使用v-bind进行属性绑定(简写形式)-->
        <div :id="name"></div>
        <!--使用v-bind进行属性绑定(定义属性名称和html中属性名称相同的简写形式)-->
        <div :name></div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp, reactive } = Vue
    createApp({
        data(){
            return{
                name:'id'
            }
        }
    }).mount('#root')
</script>

在这里插入图片描述
2. 布尔型绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-bind进行属性绑定,true/false/''时属性生效情况-->
        <!--true时属性生效-->
        <button :disabled="isTrue">Button</button>
        <!--''时属性生效-->
        <button :disabled="isNull">Button</button>
        <!--false时属性不生效-->
        <button :disabled="isFalse">Button</button>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data(){
            return{
                isTrue:true,
                isNull:'',
                isFalse:false
            }
        }
    }).mount('#root')
</script>

在这里插入图片描述
3. 动态绑定多值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-bind进行动态多属性绑定,同时绑定id和name属性-->
        <div v-bind="objectOfAttrs">Button</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                objectOfAttrs: {
                    id: 'ids',
                    name: 'names'
                }
            }
        }
    }).mount('#root')
</script>

在这里插入图片描述
4. 使用Javascript绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-bind进行属性绑定,属性值部分使用javascrip值-->
        <div :id="`list-${id}`">Button</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                id: 'ids'
            }
        }
    }).mount('#root')
</script>

在这里插入图片描述
5. 动态设置v-bind的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一个简单的按钮是否可以点击案例</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-bind进行属性绑定,动态指定属性名称-->
        <div :[attributename]="id">Button</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp } = Vue
    createApp({
        data() {
            return {
                id: 'ids',
                attributename:'name'
            }
        },
    }).mount('#root')
</script>

在这里插入图片描述

调用函数绑定(暂未研究)

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

云远12189

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue模版语法之属性绑定v-bind

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。想要响应式地绑定一个属性，应该使用 v-bind 指令。
复制链接

扫一扫

专栏目录