Vue学习之v-bind使用实例
1、打开WebStorm开发工具，新建‘test.html’,将vues.js放入同个文件夹，代码中引入vue.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
</body>
</html>
2、在body标签内添加div标签，在标签内添加h3，并使用v-bind绑定title属性，写代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-bind:title="title">h3标签</h3>
</div>
<script>
var vue = new Vue({
el : "#app",
data:{
title:"我是title",
}
})
</script>
</body>
</html>
3、打开页面，当鼠标移动到h3标签时，会显示出title
4、修改上面代码，绑定a标签的href属性，这里有个字符串连接的知识点，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-bind:title="title">h3标签</h3>
<a v-bind:href="'http://'+baidu">点我跳转到百度</a>
</div>
<script>
var vue = new Vue({
el : "#app",
data:{
title:"我是title",
baidu:"www.baidu.com",
}
})
</script>
</body>
</html>
5、上面代码，点击a标签会跳转到
6、使用v-bind配合事件行数还可以动态改变class属性，修改代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="vue.js"></script>
<style>
.red{
width:100px;
height:100px;
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app"
<a v-bind:href="'http://'+baidu">点我跳转到百度</a>
<div v-bind:class="{red:isRed,blue:isBlue}"></div>
<button v-on:click = "clickHandler">点我变蓝</button>
</div>
<script>
var vue = new Vue({
el : "#app",
data:{
title:"我是title",
baidu:"www.baidu.com",
isRed:true,
isBlue:false,
},
methods:{
clickHandler(){
this.isBlue=true;
}
}
})
</script>
</body>
</html>
7、再次打开，点击按钮就可以切换颜色了
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：121
阅读量：115
阅读量：128
阅读量：148
阅读量：186