1. v-model
Vue 提供 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。
<div id='app'>
<input type="text" v-model='inputValue'>
<h1> {{ inputValue}}</h1>
</div>
<script>
var vm = new Vue({
el : "#app",
data(){
return{
inputValue :' '
}
}
})
</script>
2.class与style绑定
v-bind
<div id="app">
<div v-bind:class=" { active: isActive} ">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return{
isActive:true,
}
}
})
</script>
其中
<div v-bind:class=" { active: isActive} ">
可以写为
<div :class=" { active: isActive} ">
<div :class="'div1'"></div>
<div class="div1"></div> //两种写法展现效果一样
html的形式 <div class="div1"></div>
vue原始写法 <div v-bind:class="'div1'"></div>
vue单个 <div :class="'div1'"></div>
vue多个 <div :class="[ 'div1', is1? '':'div2']"></div>
html: <div style="color: red;"></div>
vue单个: <div :style="color: 'red'">77</div>
vue多个: <div :style="color: 'red', width: isTrue? '100px': '200px'"></div>
<img :src="url" alt="">
var app = new Vue({
el: '#app',
data: {
url:"https://pics4.baidu.com/feed/f7246b600c3387441f759c744c3f6af1d72aa03b.jpeg?token=7e53d5f34ee6bb5236480720de526d02"
}
})