Vue如何动态处理属性?
-
v-bind指令用法
-<a v-bind:href = 'url'>跳转</a>
-
缩写形式
-<a :href = 'url'>跳转</a>
使用原生js不仅要涉及到DOM操作还要涉及DOM元素属性的操作,对于原生js来说主要提供了两个原生的API一个是get attribute用来获取属性,另外一个就是set attribute用来设置属性。
JQuery也对应封装了比较方便的方法,对应的Vue也提供了单独的语法规则用来操作属性,也就是拟定了一个新的规则v-bind 。一般情况下属性里的标签值也不是写死的,而是通过数据动态改变一个属性值。采用v-bind操作起来更加方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<a v-bind:href="url">百度</a>
<a :href="url">百度2</a>
<button v-on:click = "handle"> 切换</button>
</div>
<script src="vue.js"></script>
<script>
/*
属性绑定
*/
var vm = new Vue({
el: '#app',
data: {
url:'http://www.baidu.com'
},
methods:{
handle:function(){
// 修改URL地址
this.url = 'http://www.bilibili.com';
}
}
})
</script>
</body>
</html>