vue3 vue的使用_vue3怎么使用已有的vue-CSDN博客

本文链接：https://blog.csdn.net/weixin_53560514/article/details/132393825

vue的使用

一，数据的双向绑定（计算器）
二，样式的使用
三，v-for
三，v-if和v-show

一，数据的双向绑定（计算器）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 数据的双向绑定，绑定的表单控件 -->
        <input type="text" :value="value">
        <input type="text" v-model:value="value">
        <!-- 简写 -->
        <input type="text" v-model="value">
        <button @click="getVal">getVal</button>


        <br>
        <input type="text" v-model="first">
        <select name="" id="" v-model="selected">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model="end">
        <button @click="add">=</button>
        <input type="text" v-model="sum">
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                value: "",
                first: "",
                end: "",
                sum: "",
                selected: "+",

            },
            methods: {
                getVal() {
                    console.log(this.value);
                },
                add() {
                    if (this.selected == "+") {
                        this.sum = Number(this.first) + Number(this.end)
                    }
                    else if (this.selected == "-") {
                        this.sum = Number(this.first) - Number(this.end)
                    }
                    else if (this.selected == "*") {
                        this.sum = Number(this.first) * Number(this.end)
                    }
                    else if (this.selected == "/") {
                        this.sum = Number(this.first) / Number(this.end)
                    }

                },
            }
        })
    </script>
</body>

二，样式的使用

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .fs40 {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="class1">
            ADAD
        </div>
        <div class="box fs40">
            cca
        </div>
        <!-- 数组 -->
        <div :class="class2">dadddd</div>
        <!-- 三目表达式 -->
        <div :class="flag?'box':'fs40'">552236</div>
        <!-- 对象 -->
        <div :class="class3">5522366666</div>
        <!-- 数组内置对象 -->
        <button @click="cla"></button>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                class1: "box fs40",
                class2: ['box', 'fs40'],
                class3:{'box':true,'fs40':true},
                class4:[{'box':true},{'fs40':false}]
               
            }, methods: {
                cla() {
                    this.class1 += " color"
                    this.class2.push('color')
               
                }
            }
        })
    </script>
</body>

三，v-for

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div>{{list[0]}}</div>
        <div>{{list[1]}}</div>
        <div>{{list[2]}}</div>
        <div>{{list[3]}}</div>
        <!-- key:
        必须是数字或字符串
        必须是唯一值
        key的作用：提高重排效率 就地复用 -->
        
        <div v-for="(item,index) in list" :key="index">
            {{item}}==={{index}}
           
        </div>
        <div v-for="item in list">
            {{item}}
        </div>
        <div v-for="item in listobj" :key="item.id"> 
           
         
            {{item.title}}
        </div>
        <!-- 遍历对象 -->
        <div v-for="(value,key,index) in obj">
            {{key}}==={{value}}=={{index}}
        </div>
        <!-- 遍历数字 -->
        <div v-for="num in 5">
            biao
        </div>
        <div v-for="(item,index) in listsc" :key="item.id">
            {{item.title}}
            <div v-for="itempage in item.Selection" :key="itempage.id">
                {{itempage.page}}
            </div>
        
            </div>
    </div> 
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            listsc:[{
                id:1,
                title:'day01-',
                Selection:[
                   {
                    id:1,
                    page:'day01ss'
                   },
                   {
                    id:2,
                    page:'day02ss'
                   },
                   {
                    id:3,
                    page:'day03ss'
                   },
                    
                ]
            },
            {
                id:2,
                title:'day02-',
                Selection:[
                   {
                    id:1,
                    page:'day01ss'
                   },
                   {
                    id:2,
                    page:'day02ss'
                   },
                   {
                    id:3,
                    page:'day03ss'
                   },
                    
                ]
            }
        
        
        
        ],
            list: [1, 2, 3, 4],
            listobj: [
                {
                id: 1,
                title: 'title1'
            },
            {
                id: 2,
                title: 'title2'
            },
            {
                id: 3,
                title: 'title3'
            },


            ],
            obj:{
                name:"zs",
                age:18,
            },
            


        },
        method: {
          
        }
    })
</script>

三，v-if和v-show

相同点：隐藏元素
不同点：v-if是删除dom元素，
v-show是display：none

   应用场景： v-if应用于一次或者少次切换
             v-show应用于频繁的切换

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
     
        <div v-if="flag">v-if</div>
        <div v-show="">v-show</div>

        <div v-if="age<18">wie</div>
        <div v-else>c</div>
    </div>
    <script>
        const vm= new Var({
            el:"#app",
            data:{
                flag:true,
                age:19,
            },
            methods:{

            }
        })
        </script>
</body>