指令2——(v-bind)

一、v-bind
用来绑定html属性,使属性的值从Vue对象的数据中获得,借此控制标签的属性对应的值。
v-bind可简写为(:)。
v-bind中可以写合法的js表达式。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 用v-bind来绑定value属性,值为变量,变量值取Vue对象data内数据 -->
            <input type="button" v-bind:value="val">
            <!-- v-bind简写 -->
            <input type="button" :value="val">
            <!-- v-bind中加上其他js表达式 -->
            <input type="button" :value="val+'我是其他js表达式'">
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    val: '按钮的值我来定'
                }
            })
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,225评论 0赞 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,870评论 0赞 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,422评论 4赞 129
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,690评论 0赞 25
  • vue.js简介 Vue.js读音 /vjuː/, 类似于 viewVue.js是前端三大新框架:Angular....
    LiWei_9e4b阅读 686评论 0赞 0

友情链接更多精彩内容