Vue09-总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.colorRed {
color: red
}
.colorGreen {
color: green;
font-size: 50px;
}
/*案例样式*/
.list_con{
width:600px;
margin:50px auto 0;
}
.inputtxt{
width:550px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script src="static/vue.js"></script>
<script src="static/jquery-1.12.4.min.js"></script>
<script>
window.onload = function () {
var vm1 = new Vue({
el: '.tra',
data: {
content: '我是一个div',
url: 'picture/5.jpg',
count: 0,
// type:false,
type: true,
type_one: {
"color": "gold",
"font-weight": "bold"
}
},
methods: {
fnAddClick: function () {
this.count += 1;
}
}
});
var vm2 = new Vue({
el: '.box',
data: {
// name:"张三6",
name: '张三',
age: 18,
isShow: false
}
});
var vm3 = new Vue({
el:'#list1',
data:{
dataList:['A','B','C','D','A','B','C','D'],
dictData:{
name:"张三",
age:18,
gender:true
},
// 列表嵌套若干个 字典
dictList:[
{
name:"张三",
age:18,
gender:true
},
{
name:"王五",
age:18,
gender:true
},
{
name:"李四",
age:18,
gender:true
}
]
}
});
var vm4 = new Vue({
el:".app",
data:{
username:"原始数据",
address:"A",
like:[]
}
});
var vm5 = new Vue({
el:'.list_con',
data:{
// 输入框的内容
inputContent:"",
// 列表的内容
dataList:['学习html','学习css','学习javascript']
},
methods: {
// 1.增加数据
fnAdd:function (){
// 1.判空
if (this.inputContent == "") {
alert('不能输入为空!')
return
}
// 2.增加数据
this.dataList.push(this.inputContent)
// 3.清空输入框
this.inputContent = ""
},
// 2.删除数据
fnDel:function (index){
// 1.能增 能删 指定位置
// 参数1: 下标
// 参数2: 删除的个数
// 参数3: 增加内容
this.dataList.splice(index,1)
},
// 3.上排序
fnUp:function (index){
// 3.1 根据下标获取当前数据
var currentData = this.dataList[index]
// 3.2 删除当前的数据
this.dataList.splice(index,1)
// 3.3 重新在上一个下标插入数据
this.dataList.splice(index-1,0,currentData)
},
// 4.下排序
fnDown:function (index){
// 3.1 根据下标获取当前数据
var currentData = this.dataList[index]
// 3.2 删除当前的数据
this.dataList.splice(index,1)
// 3.3 重新在下一个下标插入数据
this.dataList.splice(index+1,0,currentData)
}
},
});
// 箭头函数
// 作用: this指向了 window箭头函数 改回来
// 点击按钮 1秒之后 谈提示框
// oBtn = document.getElementById('btn');
//
// oBtn.onclick = function () {
// console.log('在定时器之前----'+this);
// setTimeout( ()=> {
// alert('箭头函数')
// console.log('在定时器🐵🐵----'+this)
// this.style.backgroundColor = 'red'
// },1000)
};
</script>
</head>
<body>
<!--基本属性操作{{}}, v-bing, v-on-->
<div class="tra">
<div>{{content}}</div>
<img v-bind:src="url" style="width: 200px;height:300px">
<button v-on:click="fnAddClick">计数器：{{count}}</button>
<p v-bind:class="type?'colorRed':'colorGreen'">2.三目运算 条件?'1':'2'</p>
<p v-bind:class="type?'colorRed':'colorGreen'" v-bind:style="type_one">2.三目运算 条件?'1':'2'</p>
</div>
<!--if else判断 v-if -->
<div class="box">
<!-- 3.v-show 显示和隐藏 display -->
<p v-show="isShow">3.v-show 显示和隐藏 display </p>
<!-- 2.多条件 判断 age -->
<p v-if="age == '18'">少年</p>
<p v-else-if="age == 20">青年</p>
<p v-else-if="age == 30">中年</p>
<p v-else>老年</p>
<!-- 1.单条件 v-if 创建和删除-->
<p v-if="name=='张三'">1.单条件 v-if</p>
<p v-else>李四的底盘</p>
</div>
<!-- 列表渲染 v-for -->
<ul id='list1'>
<!-- 遍历list字典 -->
<li v-for="dict in dictList"> {{ dict.name }}</li>
<!-- 2.遍历字典--object -->
<li v-for="(value,key) in dictData">{{ key }}-----{{ value }}</li>
<li v-for="value in dictData">{{ value}}</li>
<!-- 1.遍历列表 -->
<li v-for="(item,index) in dataList">{{ index }} ----- {{ item }}</li>
<li v-for="item in dataList">{{ item }}</li>
<!-- <li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> -->
</ul>
<!--双向绑定 v-model-->
<div class="app">
<input type="checkbox" name="lk" value="吃饭" v-model='like'>吃饭
<input type="checkbox" name="lk" value="睡觉" v-model='like'>睡觉
<input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
<p>{{like}}</p>
<!-- 下拉列表 -->
<select v-model="address" name="" id="">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>{{ address }}</p>
<!-- 2.v-model 双向绑定 -->
<input type="text" v-model="username">
<p>{{ username }}</p>
<!-- 1.单绑 -->
<input type="text" v-bind:value="username">
<p>{{ username }}</p>
</div>
<!--todolist案例-->
<div class="list_con">
<h2>To do list</h2>
<input v-model="inputContent" type="text" name="" id="txt1" class="inputtxt">
<input v-on:click="fnAdd" type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li v-for="(item,index) in dataList">
<span>{{ item }} </span>
<a @click="fnUp(index)" href="javascript:;" class="up"> ↑ </a>
<a @click="fnDown(index)" href="javascript:;" class="down"> ↓ </a>
<a @click="fnDel(index)" href="javascript:;" class="del">删除</a>
</li>
<!-- <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> -->
</ul>
</div>
<!--箭头函数-->
<button id="btn">点击按钮 1秒之后 谈提示框</button>
</body>
</html>
浙公网安备 33010602011771号