Vue基础系列：常用命令

最新推荐文章于 2022-11-13 16:58:43 发布

天然玩家

最新推荐文章于 2022-11-13 16:58:43 发布

阅读量125

点赞数 1

分类专栏： # Vue ABC 文章标签： Vue 常用命令

本文链接：https://blog.csdn.net/Xin_101/article/details/114214745

版权

Vue ABC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1 常用命令

常用命令包括判断，展示，循环，监听等

序号	属性	描述
1	v-if,v-else-if, v-else	逻辑判断，控制数据是否展示，true：展示，false：不展示
2	v-show	展示数据
3	v-for	遍历，遍历变量和对象
3	v-on	监听函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue study.</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            template:`
            <div>
            <div v-text="mytext"></div>
            <div v-html="myhtml"></div>
            <button v-on:click="myclick">监听-用于控制v-if</button>
            <div v-if="myif">Test v-if command.</div>
            <div>测试v-if,v-else-if, v-else</div>
            <select v-model="num">
                <option :value="optionValue" v-for="optionValue in optionValues">{{ optionValue }}</option>
            </select>
            <div v-if="num==1">Test v-if command.</div>
            <div v-else-if="num==2">Test v-else-if command.</div>
            <div v-else="num==1">Test v-else command.</div>
            <div>测试v-for</div>
            <ul>
                <li v-for="(value, index) in optionValues">
                    值：{{ value }}，索引：{{ index }}
                </li>
            </ul>
            <ul>
                <li v-for="(value, key) in obj">
                    键：{{ key }}，值：{{ value }}
                </li>
            </ul>
            
            </div>
            `,
            data:function() {
                return {
                    mytext: "Test v-text command.",
                    myhtml: "<h2>Test v-html command.</h2>",
                    myif:true,
                    optionValues: [1, 2, 3],
                    num:"",
                    obj:{
                        name:"xiaoxiao",
                        address:"zhongguo"
                    }
                }
            },
            methods: {
                myclick: function() {
                    if(this.myif){
                        this.myif = false
                    } else {
                        this.myif = true
                    }
                }
            }
        })
    </script>
</body>
</html>