-
v-bind指令和绑定class
1.v-bind
2.对象语法
3.数组语法
-
内联样式
-
事件绑定
1.基本用法
2.修饰符
-
表单与v-model
一.基本用法
1.文本域
2. 单选按钮
3.复选框
4.选择列表
二.修饰符
-
v-bind指令和绑定class
1.v-bind
v-bind它的主要用法时动态的更新HTML元素上的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<a v-bind:href="url">链接</a>
<!-- 缩写为 -->
<a :href="url">链接2</a>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
url:'https://www.baidu.com/'
}
})
</script>
</html>
上面的 :class 等同于v-bind:class,是一个语法糖
2.对象语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.active{
height: 100px;
width: 100px;
background-color: skyblue;
}
</style>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div :class="{'active' : isActive}">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
isActive:true
}
})
</script>
</body>
</html>
上面的示例中,类名active 依赖与数据isActive,当它为true的时候,div 会拥有类名Active,为false时则没有。
2.数组语法
当需要多个class时,可以使用数组语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div :class="[red , black , sykblue]">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
red:"backRed",
black:"backBlack",
sykblue:"backSykblue"
}
})
</script>
</body>
</html>
也可以使用三元表达式来根据条件来切换class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div :class="[red ? black : sykblue]">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
red:false,
black:"backBlack",
sykblue:"backSykblue"
}
})
</script>
</body>
</html>
-
内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<div :style="{'width':width +'px','height' : height + 'px','background-color' :blueviolet}">
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
width:100,
height:100,
blueviolet:'blueviolet'
}
})
</script>
</body>
</html>
在实际业务中 :style的数组语法并不常用,因为可以写在对象里面。
-
事件绑定
1.基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="example">
<button v-on:click="counter += 1">+1</button>
<button @click="counter += 1">+1</button>
<p> {{ counter }}</p>
</div>
</body>
<script type="text/javascript">
var example1 = new Vue({
el: '#example',
data: {
counter: 0
}
})
</script>
</html>
上面的例子我们监听了一个按钮的点击事件,设置计数器,每次点击都加一。上面的@click 等同于v-on:click,是一个语法糖。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{counter}}</p>
<button type="button" @click="countHanld()">+1</button>
<button type="button" @click="countHanld(10)">+10</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
counter:1
},
methods:{
countHanld:function(count){
count = count || 1
this.counter +=count
}
}
})
</script>
</html>
2.修饰符
这是vue官网上查找到的
按键修饰符
-
表单与v-model
- v-bind :动态的绑定一个或多个特性,或一个组件prop的表达式
- v-model:在表单控件或组件上创建双向绑定
一.基本用法
1.文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="text" placeholder="输入" v-model="massg"/>
<p>{{massg}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
massg:''
}
})
</script>
</html>
2. 单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<input type="radio" :checked="massg"/>
<p>单选</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
massg:true
}
})
</script>
</html>
3.复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<label v-for="item in books">{{item}}
<input type="checkbox" :value="item" v-model="book" />
</label>
<p>{{book}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
books:[
'西游记',
'水浒传',
'三国演义',
'红楼梦'
],
book:[]
}
})
</script>
</html>
4.选择列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{selected}}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</html>