v-bind

v-bind 可用于设置元素的属性
复制代码
<head>
    <link rel="stylesheet" href="work2.css">
</head>
<body>
    <script src="../vue.js"></script>
    <div id="mydiv">
        <!-- 两种写法均可 -->
        <input type="button" v-bind:value="value">
        <input type="button" :value="value">
        <!-- 变量和字符串拼接 -->
        <input type="button" :value="value + '!'">
        <a :href="link">this is a link</a>
        <input type="button" value="change color" @click="change">
        <!-- 三元表达式 -->
        <div :class="isActive?'active':''">what color am I ?</div>
        <!-- 采用对象的方式（键值对） -->
        <div :class="{active:isActive}">what color am you ?</div>
    </div>
    <script src="work2.js"></script>
</body>
复制代码
.active {
    color:red
}
复制代码
var app = new Vue({
    el:'#mydiv',
    data:{
        link:'#',
        value:'my button',
        isActive:false
    },
    methods:{
        change:function() {
            this.isActive = !this.isActive
        }
    }
})
复制代码

 

posted @   树叶本子  阅读(61)  评论(0)  编辑  收藏  举报
相关博文：
·  v-html
·  v-text
·  v-bind指令
·  vue基础属性之v-bind
·  Vue v-bind就是用于绑定数据和元素属性
阅读排行：
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae