vue中有v-if,一般v-if="true"代表要显示这个控件，v-if="false"代表不显示这个控件。
比如 <input v-if="true" type="text" />
v-else配合v-if来使用，一般都直接找挨得最近的v-if
v-show类似v-if，但是v-if="false"时候，你去看源码，根本看不到隐藏前的源码，而v-show="false"的话，只是在这个组件上加上了属性 display:none。隐藏前的源码也是能看见的。
比如 <input v-show="true" type="button" value="button"/>
v-model用于链接一个html控件value属性和<script>中的数据model
比如
<div id="app">
<input type="text" v-model="num"/>
</div>
<script>
var m = { num:100};
var vm = new Vue({
el:'#app',
data : m,
methods:{
}
</script>
<!--下拉框-->
<div id="app">
<select v-model="selected">
<option value="A被选">A</option>
<option value="B被选">B</option>
<option value="C被选">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
v-bind用于改变一个属性的值
<div class="app">
<a v-bind:href="url">click me</a>
</div>
<script>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
}
});
</script>
<div class="app">
<a v-bind:href="url" v-bind:class="klass">click me</a>
<img v-bind:src="imgsrc">
</div>
<script>
var app = new Vue({
el:'.app',
data:{
url:"https://www.baidu.com",
imgsrc:"https://cn.vuejs.org/images/logo.png",
kclass:"btn btn-default"
}
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
div.red {
50px;
height: 50px;
background-color: red;
}
div.hasBorder {
border: 5px solid black;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="添加边框" v-on:click="func()"/>
<div v-bind:class="{red:isRed , hasBorder:hasBorder}"></div>
</div>
<script>
var m = {
isRed:true,
hasBorder:false
}
var vm = new Vue({
el:"#app",
data: m,
methods:{
func(){
this.hasBorder=true;
}
}
})
</script>
</body>
</html>