<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.border{
border: 1px solid #cc6600;
}
</style>
</head>
<body>
<div id="app">
<p>{{msg1}}</p>
<div v-text="msg2"></div>
<div v-html="msg2"></div>
<p v-show="isShow">显示和隐藏</p>
<p v-if="isShow">添加和删除</p>
<p v-else="true">else的添加</p>
<input type="text" v-model="msg1">
<p>用户输入的数据:{{msg1}}</p>
<input type="checkbox" v-model="isTrue">
<div :class="red">绑定一个样式</div>
<div :class="['red','border']">绑定多个样式</div>
<button @click="f2('hello')">点击</button>
<p :class="{red:isShow}">{{msg3}}</p>
<button @click="f3">点击</button>
<ul>
<li v-for="(item,index) in arr">{{index+1}}.{{item.name}}--{{item.age}}--{{item.sex}}</li>
</ul>
</div>
</body>
</html>
<script src="lib/vue-2.4.0.js"></script>
<script>
/*解构赋值*/
var user = {
name:'张三',
age:19
};
var {name,age} = user;
console.log(name,age);
/*模板字符串*/
var str = `大家好，我叫${user.name},今年${user.age}岁了`;
console.log(str);
/*函数的拓展*/
function str1(x = 10, y = 20) {
console.log(x,y);
}
str1(100);
function str2({
x=10,
y=20
}) {
console.log(x, y);
}
str2({y:50});
function arr(x,y,...args) {
console.log(x,y,args);
}
arr(1,2,3,4,5,6);
/*箭头函数*/
let add = (x,y) =>{
return x+y;
}
console.log(add(1, 2));
let add2 = x =>{
return x;
}
console.log(add2(10));
let add3 = (x,y) => x+y;
console.log(add3(10, 30));
function f1() {
setTimeout(() =>{
console.log(this);
})
}
var per = new f1();
/*Vue*/
new Vue({
el: '#app',
data: {
msg1:'hello world!',
msg2:'<h1>hello world!</h1>',
isShow:true,
isTrue:true,
msg3:'我是有颜色的',
arr:[
{name:'小明',age:18,sex:'男'},
{name:'小红',age:18,sex:'女'},
{name:'小黑',age:18,sex:'男'},
{name:'小白',age:18,sex:'男'}
]
},
methods: {
f2:function (h) {
alert(h);
},
f3(){
this.isShow = !this.isShow;
}
}
})
</script>
vue.js-Day01
最新推荐文章于 2022-03-30 20:57:52 发布
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
