2-4 Vue中的属性绑定和双向数据绑定
<!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中的属性绑定和双向数据绑定的更多相关文章
- Vue学习之vue属性绑定和双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 16 vue中通过属性绑定为元素绑定style行内样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue中通过属性绑定为元素绑定style行内样式
1.直接在元素上通过:style的形式,书写样式对象 2.将样式对象定义在data中,并直接引用到:style中 3.在:style中通过数组,引用多个data上的样式对象
- Vue中src属性绑定的问题
地址:https://blog.csdn.net/qq_25479327/article/details/80082520 地址:https://blog.csdn.net/sinat_3655513 ...
- better-scroll影响vue中radio和checkbox的双向数据绑定
我的解决办法:radio <input v-model="answer" type="radio" name="answer" val ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
随机推荐
- Python的DEBUG LOG
一直在嵌入式行业,熟悉嵌入式的朋友都很了解嵌入式设备上DEBUG的麻烦,特别是一些缺乏断电工具和没有UI界面的设备.久而久之,开发一个新东西,首先就是要先搞定DEBUG手段.最近写了几个测试的pyth ...
- Python+selenium下拉菜单选项
案例:在我要自学网登录页面选择要保留的时间 具体页面如图所示: 使用前端工具查看部分页面代码: <select class="loinp" name="Cookie ...
- manacher模板整理
//p[]为最长回文半径长度,id为当前最靠右端回文串的中心点(多个取最靠左),mx为id对应的回文串的最右端坐标+1void manacher(char *s,int len){ p[] = ; , ...
- msp430入门编程10
msp430中C语言操作端口I/O10 msp430中C语言的模块化头文件及实现11 msp430中C语言的模块化头文件及库文件12 msp430入门学习 msp430入门编程
- Thinkphp5.0 的视图view的模板布局
Thinkphp5.0 的视图view的模板布局 使用include,文件包含: <!-- 头部 --> <div class="header"> {inc ...
- springboot-jjwt HS256加解密(PS:验证就是解密)
最近项目需要用到类似access token进行加解密.验签的需求,本人在此做个小笔记记录一下,以供他人参考. 一共会用到2中加解密,HS256 和 RS256,本文只是对 HS256做个备注,好了直 ...
- Ubuntu 16.04安装RabbitVCS替代TortoiseSVN/TortoiseGit
RabbitVCS官网:http://www.rabbitvcs.org/easonjim 1.添加PPA源 sudo add-apt-repository ppa:rabbitvcs/ppa 如果导 ...
- jeecg报错:java.lang.Exception: No runnable methods
具体报错如下 ------------------------------------------------------- T E S T S --------------------------- ...
- 使用Post方法模拟登陆爬取网页(转)
使用Post方法模拟登陆爬取网页 最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; impor ...
- IOS程序崩溃报告管理解决方案(Crashlytics 在2014-09-24)
预研Crashlytics 在2014-09-241:实现原理在原理上,Crashlytics通过以下2步完成崩溃日志的上传和分析:(1)提供应用SDK,你需要在应用启动时调用其SDK来设置你的应用 ...