v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换v-show，反之使用v-if，前者的切换消耗小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <body> <diV id="app"> <input type="button" value="切换显示" @click="toggleIsShow"> <p v-if="isShow">学习vuev-if</p> <p v-show="isShow">学习v-show v-show修饰</p> <h2 v-if="temperature>=35">热死啦 </h2> </diV> <script> var app=new Vue({ el:"#app", data:{ isShow:false, temperature:40 }, methods:{ toggleIsShow:function(){ this.isShow = ! this.isShow; } }, }) </script> </body> </html>
v-bind
设置元素的属性：src，title，class
作用：为元素绑定属性
完整写法v-band：属性名
简写的话可以直接省略v-band，只保留：属性名
需要动态的增删class建议使用duixia
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style>
.active{
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="":title="imgTitle">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'":class="isActive?'active':''"@click="toggleActive">
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'":class="{active:isActive}"@click="toggleActive">//{active:isActive}active是否生效取决于isActive的值
</div>
<script type="text/javascript">
var app =new Vue({
el:"#app",
data:{
imgSrc:"./3.png",
imgTitle:"石兰",
isActive:false
},
methods:{
toggleActive:function(){
this.isActive=!this.isActive;
}
},
})
</script>
</body>
</html>
v-for
根据数据生成列表结构
数组经常和v-for结合使用
语法是（item，index）in数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">{{index+1}}学习vue好累{{it}}</li>
<!-- (it表示数组名字,index给每个数组标号) -->
</ul>
<h2 v-for="item in motto" v-bind:title="item.name">
{{item.name}}
</h2>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["坚持","努力","拼搏","梦想"],
motto:[{name:"爱拼才会赢"},
{name:"爱拼才会赢"},
]
},
methods:{
add:function(){
this.motto.push({name:"爱拼才会赢"})
},
remove:function(){
this.motto.shift();
}
},
})
</script>
</body>
</html>v-on补充
v-on缩写@click
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<input type="button" value="点击"@click="doIt('搞竞赛','学vue')">
<input type="text" @keyup.enter="sayHi">
</div>
<script>
var app =new Vue({
el:"#app",
methods:{
doIt:function(p1,p2){
console.log("做it");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("今天你学习了吗？");
}
},
})
</script>
</body>
</html>
v-model
便捷的获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素值关联
绑定的双向数据绑定表单元素的值
记事本
一.新增
1.生成列结构v-for，生成数据-数组
2.获取用户输入（v-model）
3.回车，新增数据（v-on.enter 添加数据）
v-for：根据一个数组生成一个列表结构
v-model：双向绑定数据可把表单的内容与输入的内容关联起来让你非常方便的设置取值
v-on：可以绑定事件，结合事件修饰符可以做一些限制
二.删除
1.点击删除指定内容（v-on splice 索引）数据改变，和数据绑定的元素同步改变
2.事件的自定义参数
splice方法的作用
三、统计
1.统计信息个数（v-text length）对应列表元素的个数，列表对数据的展示，列表本质就是数据的长度
.基于数据的开发方式
四、清空
1.点击清除所有信息（v-on 清空数组）
五、隐藏
1.没有数据时，隐藏元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.destroy{
}
</style>
</head>
<body>
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>记事本</h1>
<input v-model="inputvalue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}</span>
<label >{{item}}</label>
<button class="destroy" value="删除" @click="remove(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length!=0">
<span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">
clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
</footer>
<script>
var app= new Vue({
el:"#todoapp",
data:{
list:["搬砖","打螺丝","敲代码"],
inputvalue:"好好学习，天天向上"
},
methods:{
add:function(){
this.list.push(this.inputvalue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
},
})
</script>
</body>
</html>
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
