v-for:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for用于遍历数组,对象,字符串,指定次数 注::key="需要唯一"</title>
</head>
<body>
<div id="app">
<!-- 循环5 -->
<h1 v-for="(item,index) of 5">
{{item}}---{{index}}
</h1>
<hr>
<!-- 循环数组 -->
<div v-for="(item, index) of arrs" >
<div v-if="Array.isArray(item)">
<h1 v-for="(items,index) of item">
{{items}}
</h1>
</div>
<h1 v-else style="color:red">
{{item}}
</h1>
</div>
<!-- <div v-for="(item,index) of arrays" >
<div v-if="Array.isArray(item)">
<h1 v-for="(items,index) of item" >
{{items}}
</h1>
</div>
<h1 v-else style="color:red">
{{item}}
</h1>
</div> -->
<hr>
<h1 v-for="(item,index) of item" :key="index">
[11,22,33]
{
name:"hx",
age:18,
num:11222333;
}
</h1>
<hr>
<h1 v-if="z>90">turn</h1>
<hr>
<h1 v-if="x=1">
{{x}}
</h1>
<h1 v-show="x=2">v-show起作用</h1>
</div>
</body>
<script src="../vue.js代码/vue.js"></script>
<script>
Vue.config.productionTip=false;
var vm=new Vue({
el:"#app",
data(){
return{
z:99,
item:1,
x:2,
arrs:[1,2,[3,4,7]],
}
},
})
</script>
</html>
v-model的原理:
v-model是什么
1.双向数据绑定,既可以拿取data的数据,也可以写入数据
2.v-model本身是一个语法糖,一般用于表单收集
3.v-model自动绑定表单value值 v-model=""
v-model原理
1.使用v-bind绑定数据
2.使用oninput传递数据
<!-- vue.js devtools扩展工具 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<input type="text" :value="val" @input="func()">
{{val}}
<input type="submit" @click="fun1()">
</div>
</div>
</body>
<script src="../vue.js代码/vue.js"></script>
<script>
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
val:"我是默认数",
}
},
methods: {
// window.event==e
// 不同:e定义函数后不要加(),event可加可不加
// 相同:取到操作元素的所有方法
func(){
console.log(11111111111);
console.log(event);
console.log(event.target);
return this.val=event.target.value;
},
fun1(){
// console.log(event);
console.log(window.event);
},
},
})
</script>
</html>