<!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. Data of Ch5 --Dual rotor

    * Results *Conclusion*- little effect of rear rotor on Cp_1- Cp1 is independent of TI** TI effect on ...

  2. 冒泡排序 and 选择排序 变量打印斐波拉契数列 and 数组打印斐波拉契数列

    1 排序 1.1 冒泡排序 #include <stdio.h> int main() { ]; printf("input six int numbers:\n"); ...

  3. 【02】HTML5与CSS3基础教程（第8版）（全）

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

  4. Mybatis传递多个参数的4种方式（干货）

    Mybatis传递多个参数的4种方式(干货)-----https://blog.csdn.net/youanyyou/article/details/79406486

  5. Android渲染器Shader：LinearGradient（一）

     Android渲染器Shader:LinearGradient(一) LinearGradient是Android的线性渲染器.我写5个LinearGradient渲染器渲染后的View表现结果 ...

  6. [luoguP1011] 车站（递推）

    传送门 蒟蒻我关系式没有找出来. 直接模拟递推过程好了. 代码 #include <cstdio> #define N 21 int a, n, m, x, y; int up[N][2] ...

  7. bzoj 3224 NOI2004郁闷的出纳员

    NOI2004郁闷的出纳员 2013年12月26日6,1818 输入描述 Input Description 第一行有两个非负整数n和min.n表示下面有多少条命令,min表示工资下界. 接下来的n行 ...

  8. The Java library for converting Wikipedia wikitext notation to HTML

    https://code.google.com/p/gwtwiki/ The Java Wikipedia API (Bliki engine) is a parser library for con ...

  9. poj - 2195 Going Home (费用流 || 最佳匹配)

    http://poj.org/problem?id=2195 对km算法不理解,模板用的也不好. 下面是大神的解释. KM算法的要点是在相等子图中寻找完备匹配,其正确性的基石是:任何一个匹配的权值之和 ...

  10. POJ 3281_Dining

    题意: FJ准备了F种食物和D种饮料,每头牛都有喜欢的食物和饮料,并且每头牛都只能分配一种食物和饮料.问如何分配使得同时得到喜欢的食物和饮料的牛数量最多. 分析: 首先想到将牛与其对应的食物和饮料匹配 ...