一、属性绑定
v-bind ===> Vue动态处理属性
指令用法
<a v-bind:href='url'>跳转</a>缩写形式
<a :href='url'>跳转</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<body>
<div id="firstDemo">
<a v-bind:href="myUrl">跳转</a>
<select id="selection" v-on:change="setUrl">
<option label="百度" value=0></option>
<option label="爱奇艺" value=1></option>
</select>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#firstDemo',
data: {
myUrl: null
},
methods: {
setUrl: function () {
let myIndex = selection.selectedIndex;
this.myUrl = myIndex === 0 ? 'http://www.baidu.com' : 'http://www.iqiyi.com';
}
}
})
</script>
</body>
</html>v-mode ===> 双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<body>
<div id="firstDemo">
{{msg}}
<!-- v-bind 属于属性绑定，vue中定义的 msg 改变，会导致input的value值改变-->
<!-- v-input 属于事件绑定，input的value值改变，会导致 vue 中的 msg 值的改变-->
<!-- 二者相配合，最终实现了 v-mode 的功能-->
<input v-bind:value="msg" v-on:input="handler"/>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#firstDemo',
data: {
msg: '原数据'
},
methods: {
handler: function (event) {
this.msg = event.target.value
}
}
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<body>
<div id="firstDemo">
{{msg}}
<input v-model="msg"/>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#firstDemo',
data: {
msg: '原数据'
},
methods: {
}
})
</script>
</body>
</html>二、样式绑定
1. class样式处理
对象语法
<div v-bind:class="{ active: isActive }"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
/**
控制边框样式
*/
.control{
border: 10px solid green;
height: 100px;
100px;
}
/**
控制背景颜色
*/
.backColor{
background-color: yellow;
}
</style>
<body>
<div id="test">
<!-- 这种方式只能控制显示与不显示，即简单的是与否-->
<div v-bind:class="{control: isControl, backColor: isBackColor}">
</div>
<button v-on:click="reset">显示/不显示</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
isControl: true,
isBackColor: true
},
methods: {
reset: function () {
this.isControl = !this.isControl;
this.isBackColor = !this.isBackColor;
}
}
})
</script>
</body>
</html>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
/**
控制边框样式
*/
.control{
border: 10px solid green;
height: 100px;
100px;
}
/**
控制背景颜色
*/
.backColor{
background-color: yellow;
}
</style>
<body>
<div id="test">
<!-- 这种方式只能控制显示与不显示，即简单的是与否-->
<div v-bind:class="[this.controlClass, this.backColorClass]">
</div>
<button v-on:click="reset">显示/不显示</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
// 使用双引号可以取到上面已经定义好的 style 对象
controlClass: 'control',
backColorClass: 'backColor'
},
methods: {
reset: function () {
// 三元表达式实现每次取反功能
this.controlClass = this.controlClass === '' ? 'control' : '';
this.backColorClass = this.backColorClass === '' ? 'backColor' : '';
}
}
})
</script>
</body>
</html>二者结合语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
/**
控制基本样式
*/
.baseStyle{
200px;
height: 200px;
background-color: green;
}
/**
控制背景颜色
*/
.backColor{
200px;
height: 200px;
background-color: red;
}
</style>
<body>
<div id="test">
<!-- 这种方式只能控制显示与不显示，即简单的是与否-->
<!-- 如果是数组直接指定，则指明 vue 中data 中的变量，如果是对象见解指定，则需要用 style 中的对象指定 vue 中的变量-->
<div v-bind:class="[this.baseStyleClass, {backColor: this.backColorClass}]">
</div>
<button v-on:click="reset">变色</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
// 使用双引号可以取到上面已经定义好的 style 对象
baseStyleClass: 'baseStyle',
backColorClass: 'backColor'
},
methods: {
reset: function () {
// 三元表达式实现每次取反功能
this.backColorClass = this.backColorClass === 'backColor' ? '' : 'backColor';
}
}
})
</script>
</body>
</html>2. style样式处理
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<!--第一种写法-->
<div v-bind:style="{ this.widthValue, height: this.heightValue, backgroundColor: this.backgroundValue}">
</div>
<!--第二种写法-->
<div v-bind:style="this.objStyle">
</div>
<button v-on:click="reset">七十二变</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
widthValue: '100px',
heightValue: '200px',
backgroundValue: 'red',
objStyle:{
'200px',
height: '100px',
backgroundColor: 'green'
}
},
methods: {
reset: function () {
// 三元表达式实现每次取反功能
this.widthValue = '100px';
this.heightValue = '100px';
this.backgroundValue = 'green';
this.objStyle.height = '100px';
this.objStyle.width = '100px';
this.objStyle.backgroundColor = 'red';
}
}
})
</script>
</body>
</html>数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<!--第一种写法 后面的对前面样式的采取的措施是有则覆盖，无则新增-->
<div v-bind:style="[this.oldStyle, this.newStyle]">
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
oldStyle:{
'200px',
height: '100px',
backgroundColor: 'green'
},
newStyle:{
'200px',
height: '200px',
backgroundColor: 'red',
border: '10px solid yellow'
}
},
methods: {
}
})
</script>
</body>
</html>