VUE 属性绑定

vue

给A标签的url进行动态的绑定

两种方式

1.v-bind:href="Url"  无简写版本Vue

2、:href="Url"   简写版本

<div id="Bind">

<a v-bind:href="Url">百度</a>

<input id="Button1" v-on:click="handle" type="button" value="切换" />

</div>

 var Bind = new Vue({

el: "#Bind",

data: {

Url:"http://www.baidu.com"

},

methods: {

handle: function () {

this.Url="https://www.kxdao.net/forum.php"

}

}

})

可以动态的更换Url

------------------Style 样式的绑定

<style>

.active{

border:1px solid red;

width:100px;

height:100px;

}

.error{

background-color:orange;

}

</style>

<div >

<div v-bind:class="{active:isActive,error:isError}">

测试样式

</div>

<input />

</div>

var style = new Vue({

el: "#Style",

data: {

isActive: true,

isError: true

},

methods: {

handle: function () {

//控制isActive的值在true和false之间进行切换

this.isActive = !this.isActive;

this.isError = !this.isError;

}

}

})

<div v-bind:class="{active:isActive,error:isError}">
我们可以看到这种键值对类型,active对应我们在上面定义的Style,后面跟一个isActive这是表示,如果这个值为true,样式就会绑定上,反之不会绑定。

以上是 VUE 属性绑定 的全部内容, 来源链接: utcz.com/z/379266.html

回到顶部