<!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. 2017 计蒜之道 初赛 第一场 B阿里天池的新任务（简单）

    题链:"https://nanti.jisuanke.com/t/15500" 本来希望通过找循环节然后套KMP来通过后面题的,可是只过了B题,可能循环节不一定是存在的. #inc ...

  2. web前端开发——HTML

    一.简介 1.发展史 (1)web1.0 时代 产物:网页制作 那时的网页主要是静态网页,即没有与用户交互,仅仅是提供信息浏览的网页.如QQ日志.博文等. 网页制作三剑客:Dreamweaver+Fi ...

  3. xtu summer individual 5 A - To Add or Not to Add

    To Add or Not to Add Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeFo ...

  4. 九度oj 题目1205：N阶楼梯上楼问题

    题目1205:N阶楼梯上楼问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:4990 解决:2039 题目描述: N阶楼梯上楼问题:一次可以走两阶或一阶,问有多少种上楼方式.(要求采用 ...

  5. Android BottomSheet：底部弹出Fragment面板（4）

     Android BottomSheet:底部弹出Fragment面板(4) BottomSheet不仅可以弹出轻量级的定制好的面板(见附录文章5,6,7),还可以弹出"重"的 ...

  6. codevs1128 导弹拦截

    题目描述 Description 经过11 年的韬光养晦,某国研发出了一种新的导弹拦截系统,凡是与它的距离不超过其工作半径的导弹都能够被它成功拦截.当工作半径为0 时,则能够拦截与它位置恰好相同的导弹 ...

  7. apple网址

    https://developer.apple.com/downloads/index.action#   开发工具下载

  8. hdu - 1195 Open the Lock (bfs) && hdu 1973 Prime Path (bfs)

    http://acm.hdu.edu.cn/showproblem.php?pid=1195 这道题虽然只是从四个数到四个数,但是状态很多,开始一直不知道怎么下手,关键就是如何划分这些状态,确保每一个 ...

  9. linux网络编程中的shutdown()与close()函数

    1.close()函数 int close(int sockfd); //返回成功为0,出错为-1 close 一个套接字的默认行为是把套接字标记为已关闭,然后立即返回到调用进程,该套接字不能再由cl ...

  10. epoll 的accept , read, write

    http://www.ccvita.com/515.html 在一个非阻塞(fcntl)的socket上调用read/write函数, 返回EAGAIN或者EWOULDBLOCK(注: EAGAIN就 ...