<!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. MySql 基础 基本使用方法

    安装MySQL linux安装:阿里云服务器ecs配置之安装mysqlwindows安装: 解压 管理员身份进cmd执行解压目录下的可执行文件 初始化 D:\mysql-8.0.12-winx64\m ...

  2. 一个关于vue+mysql+express的全栈项目（一）

    最近学了mysql数据库,寻思着能不能构思一个小的全栈项目,思来想去,于是就有了下面的项目: 先上几张效果图吧       目前暂时前端只有这几个页面,后端开发方面,有登录,注册,完善用户信息,获取用 ...

  3. 集训第四周（高效算法设计）M题 (扫描法)

    原题:UVA11078 题意:给你一个数组,设a[],求一个m=a[i]-a[j],m越大越好,而且i必须小于j 怎么求?排序?要求i小于j呢.枚举?只能说超时无上限.所以遍历一遍数组,设第一个被减数 ...

  4. xtu summer individual-4 D - Martian Strings

    Martian Strings Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces. ...

  5. 2-sat相关知识

    转载:http://blog.csdn.net/luyuncheng/article/details/15172827 此题好纠结啊...其实2-sat关键是建边 此题网上好多题解都是直接说了建边而且 ...

  6. c++ stl 使用汇总（string,vector,map,set）

    1.string 1>substr(),截取字串的方法.返回一个从指定位置开始,并具有指定长度的子字符串.参数 start(必选),所需的子字符串的起始位置.字符串中第一个字符的索引为 0.le ...

  7. 使用idea编译spring-framework5.0源码

    自从迈入java开发这个行当,从来没有好好的研究过源码,深感惭愧,话不多说,今天上一篇使用idea编译spring5.0源码. 以下在win中构建和编译过程分为 jdk环境的配置 gradle的下载和 ...

  8. 洛谷 P1404 平均数

    P1404 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n ...

  9. Ubuntu 16.04安装qt5-default报错：qt5-default : 依赖: qtbase5-dev E: 无法修正错误，因为您要求某些软件包保持现状，就是它们破坏了软件包间的依赖关系。（此类问题终极解决方法）

    切记:没事不要进行sudo apt-get upgrade 错误: qt5-default : 依赖: qtbase5-dev E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间 ...

  10. dubbo安装和使用

    转载:http://blog.csdn.net/zjcjava/article/details/78766095 背景 Dubbo的开源人梁飞在内部的交流会上宣布重启dubbo的维护和更新,具体PPT ...