2.Vue的style属性绑定+条件渲染+列表渲染
一.style属性绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style属性绑定</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 绑定前 -->
<div id="box">
<div id="div1" style="color: red;font-size: 100px;">111</div>
<!-- 绑定了style属性，值就是一个JSON对象，键用单引号引起来 -->
<div id="div2" :style="{'color':'green','font-size':'200px'}">222</div>
<!-- 一般不会把值给死 -->
<div id="div3" :style="{'color':myColor,'font-size':mySize}">222</div>
<!-- 设置json对象为变量 -->
<div id="div4" :style="myJson">4444</div>
<!-- 绑定多个json对象 -->
<div id="div5" :style="[myJson,myJson2]">4444</div>
<div id="div6" :style="">6666666666</div>
<div id="div7" :style="{color:mycolor,fontSize:mysize}">
777
<button type="button" id="btn" @click="change(flag=!flag)">点击切换样式</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
const v = new Vue({
el: "#div3",
data: {
'myColor': 'red',
'mySize': '300px',
}
});
const v2 = new Vue({
el: "#div5",
data: {
'myJson': {
'color': 'red',
'font-size': '100px'
},
'myJson2': {
'background': 'yellow',
'border': '3px black solid',
}
}
});
new Vue({
el:"#div7",
data:{
'flag':true,
'mycolor':'black',
'mysize':'100px'
},
methods:{
change(flag){
if(flag){
this.mycolor='red';
this.mysize='100px';
}else{
this.mycolor='green';
this.mysize='300px';
}
}
}
})
</script>
二.事件
事件出来用v-on来绑定,@符号表示简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" v-on:click="test()">按钮</button>
</body>
</html>
<script type="text/javascript">
new Vue({
el:'button',
data:{
'name':"张三"
},
methods:{
test(){
alert("我被按下去了");
/* this在方法里指向当前Vue实例 */
alert(this.name)
}
}
})
</script>
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：如阻止表单默认的提交行为
<!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">
<form action="#" method="get" v-on:submit="stop($event)">
用户名<input type="" name="username" id="" value="" /><br>
密码<input type="" name="password" id="" value="" /><br>
<input type="submit" value="提交" />
</form>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
methods: {
stop(e) {
e.preventDefault();
}
}
})
</script>
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻
辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
width: 400px;
height: 400px;
border: 1px black solid;
}
#nei{
width: 200px;
height: 200px;
border: 1px black solid;
}
#div{
width: 100px;
height: 100px;
border: 1px black solid;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#" method="get" v-on:submit="stop($event)">
<div id="wai">
<div id="nei" @click="test1()">
<div id="div" @click.stop="test2()">
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#wai",
data:{
},
methods:{
test1(){
alert(1)
},
test2(){
alert(2);
}
}
})
</script>
阻止默认行为
<!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">
<form action="#" method="get" v-on:submit.prevent="stop()">
用户名<input type="" name="username" id="" value="" /><br>
密码<input type="" name="password" id="" value="" /><br>
<input type="submit" value="提交" />
</form>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
methods: {
stop() {
}
}
})
</script>
事件只触发一次
<!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="box">
<a :href="url" @click.once="test()">进入百度</a>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
'url':"http://www.baidu.com"
},
methods:{
test(){
alert("只能执行一次")
}
}
})
</script>
按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#" method="get" >
用户名<input type="" name="username" id="" value="" /><br>
密码<input type="" name="password" id="" value="" /><br>
<!-- 只有按下enter键时 才会提交 -->
<input type="submit" value="提交" v-on:keydown.enter="submit"/>
</form>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
}
})
</script>
条件渲染
1.V-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<!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="box">
<div id="nei" v-if="num">啊哈,金色传1</div>
<div id="nei" v-else>啊哈,金色传2</div>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
'num':true
}
})
</script>
2.v-else-if
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 80">良好</span>
<span v-else-if="score >= 60">及格</span>
<span v-else>不及格</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
score:80
}
})
</script>
</body>
</html>
3.v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#demo{
width: 200px;
height: 100px;
background-color: #7FFFD4;
}
</style>
</head>
<body>
<div id="app">
<div id="demo" v-show="flag">
</div>
<button @click="flag=!flag">显示/隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
</body>
</html>
列表渲染
1.遍历数组
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items
形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<!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="box">
<div id="app" v-for="item in arr">
{{item}}
</div>
<div id="app2" v-for="(item,index) in arr2">
{{item}}---{{index}}---{{arr2[index]}}
</div>
<!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
<div id="app3" v-for="item of arr3">
{{item}}
</div>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
arr:["1","2","3","4"],
arr2:["找","前","孙","李"],
arr3:["1","22","333","4444"]
}
})
</script>
2.遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-for="(value, name, index) in object">
{{index}}---{{name}}---{{value}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</body>
</html>
3.对数组的操作
push 数组尾部添加元素
pop 数组尾部删除元素
shift 数组头部删除元素
unshift 数组头部添加元素
splice 添加/删除元素
sort 数组排序
reverse 数组元素反转
<!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="bos">
<div id="nei" v-for="item in arr">
{{item}}
</div>
<button type="button" id="btn" v-on:click="click()">按钮</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#bos",
data: {
arr: ["100", "200", "300", "400"]
},
methods: {
click() {
//1.push数组尾部添加元素
this.arr.push("500");
//2、通过索引值修改数组的元素不是响应式
//this.arr[0] = '999';
//3、pop():删除数组中最后一个元素
this.arr.pop();
//4、shift():删除数组第一个元素
this.arr.shift();
//5、unshift():在数组的头部添加元素
this.arr.unshift('9999');
//6、splice():删除元素、插入元素、替换元素
//splice(起始元素下标，删除元素的个数，添加元素1,添加元素2,...)
this.arr.splice(0, 2); /* 从下标为0的元素开始，删除两个元素 */
this.arr.splice(1, 0, '8000', '9000'); /* 从下标为1的元素开始，不删除元素，添加'8000'和'9000' */
this.arr.splice(2, 2, '1111'); /* 从下标为2的元素开始，删除两个元素，添加'1111' */
//7、sort():排序
//this.arr.sort();
//8、reverse():反转
this.arr.reverse();
}
}
})
</script>
循环案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in students">
{{index}}---{{item.name}}---{{item.age}}---{{item.gender}}
<a href="#" @click.prevent="del(index, item.name)">删除</a>
<a href="#" @click.prevent='update(index, {
id:4,
name:"赵六",
age:26,
gender:"男"
})'>修改</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
students:[
{
id:1,
name:'张三',
age:23,
gender:'男'
},
{
id:2,
name:'李四',
age:24,
gender:'男'
},
{
id:3,
name:'王五',
age:25,
gender:'男'
}
]
},
methods:{
del(index, name) {
if(window.confirm("你确定删除" + name + "吗?")) {
this.students.splice(index,1);
}
},
update(index, item) {
if(window.confirm("你确定更新" + name + "吗?")) {
this.students.splice(index, 1, item);
}
}
}
})
</script>
</body>
</html>