Vue.js（2.0）笔记2

最新推荐文章于 2024-08-30 20:29:15 发布

等一场梦

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量120

点赞数 1

文章标签： vue.js 笔记

本文链接：https://blog.csdn.net/m0_74599628/article/details/136786780

版权

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传递数据

<!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>