<!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. UvaLive 4872 Underground Cables （最小生成树）

    题意: 就是裸的最小生成树(MST), 完全图, 边长是实数. 分析: 算是复习一下MST把 方法一: prim 复杂度(n^2) #include <bits/stdc++.h> usi ...

  2. prometheus监控linux系统

    安装node exporter 创建Systemd服务 #vim /etc/systemd/system/node_exporter.service[Unit]Description=mysql_ex ...

  3. JavaWeb 项目，更改本地文件需刷新才有效问题 （tomcat相关）

    问题 如果JavaWeb项目需要读取实时更新的本地文件内容,可能遇到必须在更新后手动refresh才能有效的问题. 原因 这是由于项目实际上是运行在Tomcat中,而非本地的工作目录.eclipse可 ...

  4. java项目连接access数据库

    1.导入Access_JDBC30.jar到项目中 jar包百度云链接:https://pan.baidu.com/s/10HFM3HomMArvfHjklA_1MA 密码:0qxp 项目名称-> ...

  5. KSQL日期字段访问

    日期常量用法 KSQL中用日期常量必须用{ts'" + dateTime.ToString("yyyy-M-d HH:mm:ss") + "'} 正确写法: I ...

  6. Sumdiv（poj1845）

    题意:求A^B的因子的和. /* 首先将A分解 A=p1^a1*p2^a2*...*pn*an A^B=p1^a1B*p2^a2B*...*pn*anB 因子之和sum=(1+p1+p1^2+...+ ...

  7. hdu - 2645 find the nearest station (bfs水)

    http://acm.hdu.edu.cn/showproblem.php?pid=2645 找出每个点到距离最近的车站的距离. 直接bfs就好. #include <cstdio> #i ...

  8. cogs——2084. Asm.Def的基本算法

    2084. Asm.Def的基本算法 ★☆   输入文件:asm_algo.in   输出文件:asm_algo.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] “有句 ...

  9. mysql实现oracle序列

    mysql实现oracle序列的方案1.建表,表结构为:drop table if exists sequence; create table sequence ( seq_name VARCHAR( ...

  10. CentOS 7 es搭建测试

    搭建本地yum repo pass 指定特定repo 安装,比如安装wget.(指定特定repo 是为了从最快的repo安装) yum --disablerepo=\* --enablerepo=os ...