【Vue.js】属性绑定和双向数据绑定(四)

1、v-bind: 属性绑定,简写为冒号“:”

绑定后属性为模板中属性

2、:value设置值

<input :value="content"/>

3、v-model双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-bind:title="title">{{title}}</div>
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",
            // template:'<h1>{{msg}}</h1>',
            data:{
                content:"hello world",
                title:"this is hello world"
            },
            methods:{
                handleClick:function () {
                    this.content = "world"
                }
            }
        })
    </script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,455评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,787评论 4 129
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,323评论 19 139
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,643评论 0 3
  • 再顾红尘处 余音未袅袅
    禾颜越瑟阅读 1,020评论 0 1