Vue基础(五)样式,内置指令

最新推荐文章于 2023-08-04 19:22:03 发布

夜刀神十三香

最新推荐文章于 2023-08-04 19:22:03 发布

阅读量516

点赞数

分类专栏：记录笔记学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_44990139/article/details/95601546

版权

笔记同时被 3 个专栏收录

65 篇文章 0 订阅

订阅专栏

学习笔记

65 篇文章 0 订阅

订阅专栏

记录

64 篇文章 0 订阅

订阅专栏

v-value是单向绑定只能赋值,不能取值
v-model是双向绑定,可以取值也可以赋值;

样式

:class

属性赋值 {样式名称 : 布尔值}
计算属性赋值返回就是一个json 字符串{样式名称 : 布尔值}
方法赋值
数组赋值: [样式名称1,样式名称2,三元表达式]

:style

css属性名称中包含分隔符的命名,全部使用驼峰命名法
字体大小必须要带单位
对象赋值
计算属性赋值
方法赋值

内置指令

v-once:不需要表达式,作用是定义他的元素或组件只渲染一次.包括元素或组件的子组件.首次渲染后,不再随着数据变化而变化,将被视为静态内容.

v-if , v-else , v-else-if
所有分支标签必须紧邻着
v-show的用法和 v-if基本一致
v-if会将标签销毁,而v-show是改变css属性display为隐藏,

<body>
    <div id="app">
        <template v-if="maxstatus==1">
            <div>
                    用户名 : <input type="text">
            </div>
        </template>
        <template v-else="maxstatus==0">
                <div>
                        密码 : <input type="text">
                </div>
        </template>
        <button @click="qiehuan">切换</button>
        <div>
                <h1 v-show="vshow==1">这是show1</h1>
        </div>
        <div>
                <h1 v-show="vshow==0">这是show2</h1>
        </div>
        <button @click="show">显示隐藏show</button>
    </div>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                maxstatus:1,
                vshow:1
            },

            methods:{
                qiehuan:function(){
                if(this.maxstatus==1){
                    this.maxstatus=0
                }else{
                    this.maxstatus=1
                }
            },
            show:function(){
                if(this.vshow==1){
                    this.vshow=0
                }else{
                    this.vshow=1
                }
            }
         }
     })
    </script>

</body>

v-for的用法

v-for="(item, index) of arr
v-for="(item, index) in arr
v-for="(item, key,index) int arr
v-for="(item, index) of arr与v-for="(item, index) in arr 效果相同

<body>
    <div id="app">
        <ul>
            <li v-for="n in 3">{{n}}</li>
        </ul>

        <ul>
            <li v-for="n in arr">{{n}}</li>
        </ul>

        <ul>
            <li v-for="(item, index) in arr">{{index}}----{{item}}</li>
        </ul>

        <ul>
            <li v-for="(item, index) of arr">{{index}}----{{item}}</li>
        </ul>
        
        <ul>
            <li v-for="(item, index) in arr">{{item.id}}-----{{item.name}}</li>
        </ul>

        <ul>
            <li v-for="(value, key) in arr">{{key}}-----{{value}}</li>
        </ul>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:[
                    {id:1,name:"张三"},
                    {id:2,name:"李四"},
                    {id:3,name:"王五"},
                ]
            },  
        })
    </script>
</body>