vue内置语法v-for,v-if,v-once,v-show

x33g5p2x  于11个月前 转载在 Vue.js  
字(5.2k)|赞(0)|评价(0)|浏览(69)

五 内置语法

vue 内置了一些语法,可以方便我们快速开发,比如 v-clock, v-for ,v-if等;

5.1 v-cloak

 <div id="app" v-cloak>
        {{content}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                content: "知识追寻者",
             },
        })
    </script>

5.2 v-once

定义的元素或者组件只渲染一次

    <div id="app" >
        <div  v-once>{{content}}</div>
        <span v-once>{{content}}</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                content: "知识追寻者",
             },
        })
    </script>

5.3 v-if-else

v-else-if 跟在 v-if 后面, v-else 跟在v-else-if 或者 v-if 后面; vue在渲染时尽可能使用已有的元素;

如下示例中 在点击按钮时会改变输入框

<div id="app" >
        <template v-if="loginType === 'username'">
            <label>username</label>
            <input placeholder="用户名">
        </template>
        <template v-else>
            <label>password</label>
            <input placeholder="密码">
        </template>
        <button @click=changeLoginType>改变输入类型</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                loginType: "username",
             },
            methods: {
                changeLoginType: function(){
                    this.loginType = (this.loginType == 'username' ? 'password' :  'username');
                }
            }
        })
    </script>

渲染结果

点击按钮后

由于input标签不唯一,会存在在username输入框输入内容后切换至password输入框内容未被清空;故需要使用vue的key属性保证input是单独唯一

<div id="app" >
        <template v-if="loginType === 'username'">
            <label>username</label>
            <input placeholder="用户名">
        </template>
        <template v-else>
            <label>password</label>
            <input placeholder="密码">
        </template>
        <button @click=changeLoginType>改变输入类型</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                loginType: "username",
             },
            methods: {
                changeLoginType: function(){
                    this.loginType = (this.loginType == 'username' ? 'password' :  'username');
                }
            }
        })
    </script>

5.4 v-show

v-show 是改变CSS的 display 属性; 当 v-show 为 false 时 ,内容就会被隐藏,相当于display: none;

<div id="app" >
        <p v-show="status==1">知识追寻者</p>
        <button @click=changeStatus>是否隐藏</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            methods: {
                changeStatus: function(){
                    this.status = (this.status == '1' ? '2' :  '1');
                }
            }
        })
    </script>

渲染结果

<p style="display: none;">知识追寻者</p>

Tip : v-show 不能在 < template> 中使用

5.5 v-for

v-for 使用方式 是 item in items ; 其中 item 是一个对象;items 是对象集合;可以从item中获取属性;

<div id="app" >
        <ul>
            <li v-for="user in users">{{user.name}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                users : [
                    {name : '知识追寻者'},
                    {name : '李霄云'},
                    {name : '蜡笔小新'}
                ]
            }
        })
    </script>

页面渲染结果

  • 知识追寻者
  • 李霄云
  • 蜡笔小新

可以用 of 替代 in 作为分隔符 <div v-for="item of items"></div>

v-for 使用在 template 上

<div id="app" >
        <ul>
            <template>
                <li v-for="user in users">{{user.name}}</li>
            </template>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                users : [
                    {name : '知识追寻者'},
                    {name : '李霄云'},
                    {name : '蜡笔小新'}
                ]
            }
        })
    </script>

v-for 使用对象语法

支持 value in item ; (value , key) in item ; (value, key, index ) in item;

<div id="app" >
        <ul>
            <template>
                <li v-for="(value ,key ) in user">{{key}}: {{value}}</li>
            </template>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                user : {
                    name : '知识追寻者',
                    age : '25',
                    regular : 'jog'
                },
               
            }
        })
    </script>

渲染结果

  • name: 知识追寻者
  • age: 25
  • regular: jog

5.6 数组更新

Vue 包裹数组监听方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

push 示例

<div id="app" >
        <ul>
            <li v-for="user in users">{{user.name}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                users : [
                    {name : '知识追寻者'},
                    {name : '李霄云'},
                    {name : '蜡笔小新'}
                ]
            }
        })
        app.users.push({
            name : '一口'
        })
    </script>

渲染示例

  • 知识追寻者
  • 李霄云
  • 蜡笔小新
  • 一口

5.7 方法事件

v-on:click 基本用法实现计数器

 <div id="app" >
        <span>点击次数:{{count}}</span>
        <button @click="addCount">添加次数</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                count : 1,
            },
            methods :{
                addCount: function() {
                    this.count = this.count + 1;
                }
            }
        })
    </script>

原则上 @click的方法名称也可以带();然后还可以传参,

在 vue 中使用原生的事件

 <div id="app" >
        <span>点击次数:{{count}}</span>
        <button @click="addCount">添加次数</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                count : 1,
            },
            methods :{
                addCount: function(event) {
                    this.count = this.count + 1;
                    if (event) {
                        // 弹出标签名称
                        alert(event.target.tagName)
                    }
                }
            }
        })
    </script>

多个参数

<div id="app" >
        <span>点击次数:{{count}}</span>
        <button @click="addCount('标签是',$event)">添加次数</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                status: "1",
             },
            data: {
                count : 1,
            },
            methods :{
                addCount: function(message,event) {
                    this.count = this.count + 1;
                    if (event) {
                        event.preventDefault()
                        // 弹出标签名称
                        alert(message + event.target.tagName)
                    }
                }
            }
        })
    </script>

事件修饰符,案件修饰符以后再写

相关文章