vue学习随笔01

vue

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 >

<input type="text" v-model="num"/>

</div>

<script>

var m = { num:100};

var vm = new Vue({

el:'#app',

data : m,

methods:{

}

</script>

<!--下拉框-->

<div >

<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 {

width: 50px;

height: 50px;

background-color: red;

}

div.hasBorder {

border: 5px solid black;

}

</style>

</head>

<body>

<div >

<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>

以上是 vue学习随笔01 的全部内容, 来源链接: utcz.com/z/380048.html

回到顶部