Vue学习
v-show
隐藏图标
- v-show=true 当true时图标出现
- v-show=“age>=18” 当age大于等于18时，图片出现。
点击按钮，图标出现，再点击隐藏。
<div id="app">
<input type="button" value="隐藏图标" @click="change">
<img v-show="isshow" src="imge/3.jpg" alt="">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isshow:false
},
methods:{
change:function(){
this.isshow=!this.isshow;
}
}
})
</script>
注意：只有函数里可以用等号。
v-if
v-show和v-if的区别。
- 频繁切换的用v-show。反之用v-if，因为性能大。
- v-show操作的是样式。v-if操作的是dom，直接移除再添加回来。
v-bind
- 操作元素的属性,显示属性
img v-bind:src="imgSrc"
img :src="imgSrc"
本地应用
在俩个链接后，来回切换图片，第一张时，左面三角消失，最后一张，右面三角消失。
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
深圳创维校区环境
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="" />
<!-- 左箭头 -->
<!-- <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a> -->
<a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index @click="next" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
</body>
a href="javascript:void(0)"//表示点击链接后，什么都不发生
v-for
<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<li v-for="(it,index) in arr">
{
{
index}}lkq:{
{
it}}
</li>
<h2 v-for="it in shucai" v-bind-title="it.name">
{
{
it.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr:["北京","上海","广州"],
shucai:[
{
name:"蛋炒饭"},
{
name:"烤肉"}
]
},
methods: {
add:function(){
this.shucai.push({
name:"烤冷面"});
},
remove:function(){
//从头开始移除
this.shucai.shift();
}
},
})
</script>
</body>
v-model
获取和设置表单元素的值（双向数据捆绑），表单输入变化后message变化
<body>
<div id="app">
<!-- 按回车之后反应 -->
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{
{
message}}</h2>
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message:"lkq"
},
methods:{
getM:function(){
alert(this.message);
}
}
})
</script>
</body>
记事本增删改查
- 增加互相绑定，v-model绑定数组和inputValue(输入内容)
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus"/>
//===============================
add:function(){
this.list.push(this.inputValue);
},
- 删除：点击后，触发remove
- splice删除传进来的索引，一次删一个。
<button class="destroy" @click="remove(index)"></button>
//====================
remove: function (index) {
this.list.splice(index, 1);
},
- 统计：用v=text渲染到页面上
<strong>{
{
list.length }}</strong>
- 清空:数组赋值为null
<button v-show="list.length!=0" class="clear-completed" @click="clear">
//============================
clear: function () {
this.list = [];
}
- 隐藏：
v-if="list.length!=0"和v-show="list.length!=0"等于0时，隐藏button和span
<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">