Vue第二天学习

最新推荐文章于 2024-08-08 22:08:10 发布

@、

最新推荐文章于 2024-08-08 22:08:10 发布

阅读量90

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117421999

版权

本文详细介绍了Vue.js中的条件渲染（v-if/v-else/v-show）、列表渲染（v-for）以及结合计算属性和方法的使用技巧，通过实例展示了如何在模板中动态控制元素的显示与隐藏，以及如何遍历数组和对象，过滤数据并实现优先级控制。同时探讨了v-for与v-if的配合使用策略。

摘要由CSDN通过智能技术生成

vue第二天学习

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
        <p v-bind:style="styleObject">style绑定</p>
        <h1 v-if="panduan">我是if为true</h1>
        <h1 v-else>我是else为true</h1>
        <template v-if="longinType === 'username'">
            <label>用户名：</label>
            <input placeholder="请输入用户名" key="username-input" />
        </template>
        <template v-else>
            <label>Email</label>
            <!-- 添加key属性后，点击切换按钮之前输入是值也会清除。如果不添加key属性则之前添加的值不会清空。 -->
            <input placeholder="Email" key="email-input" />
        </template>
        <button @click="transformation">切换登录模式</button>
        <p v-show="ok">v-show属性</p>
        <p v-show="showmessage==='xianshi'" style="color: aqua;">v-show属性:
            可以用于判断，无论值为true还是false都会加载。
            当为false时添加style="display: none;"
            当为true时正常显示
        </p>
        <template v-if="true">
            <ol>
                <li v-for="item in vforMessage">{{item.text}}</li>
            </ol>
        </template>
        <ul>
            <li v-for="(item,index) of vformessage2">父亲属性：{{parentMessage}}
                &nbsp;&nbsp;&nbsp;子属性下标：{{index}}   
                &nbsp;&nbsp;&nbsp;子属性值：{{item.message}}
            </li>
        </ul>
        <p style="color:darkblue">使用v-for遍历对象：v-for获取数组时可以获取内容、键值、索引。
            但是顺序vue内定了就是-内容-键值-索引,可以根据自己的需求去获取。索引下标从0开始
        </p>
        <ul>
            <li v-for="(item,name,index) of object">
                索引值：{{index}}&nbsp;&nbsp;&nbsp;键值：{{name}}&nbsp;&nbsp;&nbsp;内容{{item}}
            </li>
        </ul>
        <p style="color:darkblue">使用计算属性展现数组过滤</p>
        <ul>
            <li v-for="n of numbers">
                {{n}}
            </li>
        </ul>
        过滤后的值为：{{evenNumber}}
        <p style="color:darkblue">在二维数组中不适合用计算属性,则可以使用一个方法</p>
        <ul v-for="item of numbers1"> 
            <li v-for="n in event(item)"s>
                {{n}}
            </li>
        </ul>
        <p style="color:darkblue">v-for接受整数重复模板显示</p>
        <span v-for="n in 10">{{n}}</span>
        <p style="color:darkblue">v-for的优先级比v-if高所以可以利用这一条件可以对一个数组中的值进行判断显示</p>
        显示奇数：
        <ul>
            <li v-for="value in showmessage1" v-if="value%2 !=0 ">
                {{value}}
            </li>
        </ul>
        <p style="color:darkblue">如果是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素或template标签上</p>
        数组循环输出：
            <ul v-if="showmessage1.length">
                <li v-for="value in showmessage1">
                    {{value}}
                </li>
            </ul>
        </div>
    </body>
</html>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
            styleObject:{
                color:"red",
                fontSize:"20px"
            },
            panduan:"true",
            longinType:"username",
            ok:false,
            showmessage:"xianshi",
            vforMessage:[
                {text:"v-if与v-for一起使用时,v-for的优先级比v-if高所以建议不再一起使用"},
                {text:"只是优先级高，不是不显示不要理解错误"}
            ],
            parentMessage:"parent",
            vformessage2:[
                {message:"星期一"},
                {message:"星期二"},
                {message:"星期三"}
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            numbers:[1,2,3,4,5,6,7,8],
            numbers1:[[1,2,3,4,5],[6,7,8,9,10]],
            showmessage1:[1,2,3,4,5,6,7,8,9,10]
            
        },
        methods:{
            transformation:function(){
                this.longinType=this.longinType==='username'?'Email':'username'
            },
            event:function(numbers){
                return numbers.filter(function(number){
                    return number%2===0
                })
            }
        },
        computed:{
            evenNumber:function(){
                return this.numbers.filter(function(number){
                    return number%2===0
                })
            }
        }

    })
</script>