美文网首页
【Vue.js】属性绑定和双向数据绑定(四)

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

作者: kingloongMagic | 来源:发表于2018-08-27 00:00 被阅读0次

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之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

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

    1、v-bind: 属性绑定,简写为冒号“:” 绑定后属性为模板中属性 2、:value设置值 3、v-model...

  • Vue基础

    Vue.js不支持IE8及其以下版本,渐进式:易用、灵活、高效实例化对象 绑定属性和方法 如何实现数据双向绑定?方...

  • 2019-03-06

    1 通过以下代码体验Vue.js最核心的功能——数据的双向绑定 2 使用v-bind绑定data中的属性

  • JS双向数据绑定

    双向数据绑定简述 双向数据绑定,可以将JS对象的属性绑定到DOM节点上,实现JS对象跟DOM节点的同名属性的关联,...

  • 2 数据绑定

    1 通过以下代码体验Vue.js最核心的功能——数据的双向绑定 2 使用v-bind绑定data中的属性 语法糖...

  • Angular框架中的模板语法和常用指令

    模板表达式(属性绑定): 输入属性的值为实例属性: 事件绑定: 双向数据绑定: *与template: 1、*ng...

  • 2 数据绑定

    1 通过以下代码体验Vue.js最核心的功能——数据的双向绑定 双向绑定v-mod...

  • ReactiveCocoa使用实践

    使用RACChannel进行双向数据绑定 RACChannel 非常适合于视图和模型之间的双向绑定,在对方的属性或...

  • Vue.js 双向数据绑定原理分析

    在使用Vue.js自定义组件时,很多时候,我们都期望数据是双向绑定的。 Vue.js实现双向数据绑定的两种方式 1...

网友评论

      本文标题:【Vue.js】属性绑定和双向数据绑定(四)

      本文链接:https://www.haomeiwen.com/subject/utiaiftx.html