插值表达式、v-text、v-html这些都是渲染数据,而且数据是渲染到标签体中的,但是如果想要渲染到属性中【更改属性值】,这些表达式和指令解决不了
v-bind:负责渲染数据到属性中【更改属性值】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../public/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="message">
<!-- 简写方式-->
<input type="text" :value="message">
</div>
<script>
new Vue({
el:"#app",
data:{
message:"属性值"
}
});
</script>
</body>
</html>
通过v-bind更改属性值为对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../public/js/vue.min.js"></script>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="{red:className,green:!className}">解封了</h1>
<button @click="className = false">更改为绿色</button>
<button @click="className = true">更改为红色</button>
</div>
<script>
new Vue({
el:"#app",
data:{
className:true
}
});
</script>
</body>
</html>