<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性绑定和双向数据绑定</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root"></div>

    <script type="text/javascript">

        new Vue({

            el: "#root"

        })

    </script>

    </body>

    </html>

只是引入了Vuejs的库，然后创建了一个div标签作为一个挂载点，然后让Vue实例挂载到我们的这个挂载点之下。接下来写模板的内容。title是一个HTML的一个属性。希望这个提示语title可变，不是写死的。我们可以在实例的data里面去定义一个title，让它等于this is hello world。这个时候title里显示的内容是数据里的title就可以了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性绑定和双向数据绑定</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

        <div title="this is hello world">hello world</div>

    </div>

    <script type="text/javascript">

        new Vue({

            el: "#root"

        })

    </script>

    </body>

    </html>

这样写可以吗？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性绑定和双向数据绑定</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="root">

        <div title="title">hello world</div>

    </div>

    <script type="text/javascript">

        new Vue({

            el: "#root",

            data:{

               title:"this is hello world"

            }

        })

    </script>

    </body>

    </html>

现在只是显示字符串的title，并不是下面data里面数据项里的title。如果在Vue之中我们希望做属性的绑定，这个title属性绑定的是数据里面的title，那怎么做好属性的绑定呢？那就需要在前面使用一个新的模板指令：

v-bind:

它的意思是

2-4 Vue中的属性绑定和双向数据绑定的更多相关文章

  1. Vue学习之vue属性绑定和双向数据绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  3. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  4. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Vue中通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象

  7. Vue中src属性绑定的问题

    地址:https://blog.csdn.net/qq_25479327/article/details/80082520 地址:https://blog.csdn.net/sinat_3655513 ...

  8. better-scroll影响vue中radio和checkbox的双向数据绑定

    我的解决办法:radio <input v-model="answer" type="radio" name="answer" val ...

  9. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

随机推荐

  1. Why Countries Succeed and Fail Economically

    Countries Succeed and Fail Economically(第一部分)" title="Why Countries Succeed and Fail Econo ...

  2. 【Objective-C】07-自定义构造方法和description方法

    在第5讲中已经介绍了如何定义类和创建并初始化对象,比如有Student这个类 1.Student.h 1 #import <Foundation/Foundation.h> 2 3 @in ...

  3. 九度oj 题目1202：排序

    题目1202:排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:28802 解决:9408 题目描述: 对输入的n个数进行排序并输出. 输入: 输入的第一行包括一个整数n(1<=n ...

  4. hdu 2642二维树状数组 单点更新区间查询 模板题

    二维树状数组 单点更新区间查询 模板 从零开始借鉴http://www.2cto.com/kf/201307/227488.html #include<stdio.h> #include& ...

  5. React Native学习（五）—— 使用插件react-native-scrollable-tab-view

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  6. neutron trouble shooting - ip can not ping

    neutron创建了一个router后,显示列表如下: [root@controller01 keystone]# neutron router-port-list router +--------- ...

  7. 使用Post方法模拟登陆爬取网页(转)

    使用Post方法模拟登陆爬取网页   最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; impor ...

  8. Windows系统下查看已共享的文件夹的方法

    电脑使用时间比较长,共享过好几次文件夹,现在想取消共享,但共享文件夹的路径隐藏得太深,要怎么样才能快速找到共享文件夹的实际路径呢?” “其实现在单位常见的方法都是用网上邻居的共享文件夹,共享的文件夹也 ...

  9. BUILD FAILED D:\build.xml:2: 前言中不同意有内容。

    1.错误描写叙述 Microsoft Windows [版本号 6.1.7601] 版权全部 (c) 2009 Microsoft Corporation. 保留全部权利. C:\Users\Admi ...

  10. JAVA获取操作系统的信息

    列出全部信息: Properties prop = System.getProperties(); prop.list(System.out); 获取某个信息: String os = prop.ge ...