Vue的使用

最新推荐文章于 2024-05-17 12:28:02 发布

原创最新推荐文章于 2024-05-17 12:28:02 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

python 专栏收录该内容

121 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-if、v-else、v-else-if、v-show指令的使用方法，以及如何利用v-for实现动态列表渲染。同时，讲解了v-bind在img标签和a标签上的应用，以及在条件渲染时使用key属性管理可复用元素的技巧。

v-for循环解决img标签的src动态绑定问题

3、img标签动态绑定src

<ul v-for="i in product" class="clear">
	<li>
		<img :src="i.src"/>
	</li>
	<li>
	       <button>立即购买</button>
	</li>
        <br />

</ul>

注意：此处的绑定，数据不要写成   :src="｛｛i.src｝｝"之类的。这是错误的！！！！

vue之给a标签赋值

1 <li v-for="(bp,index) in bpLists">
3  <a class="bidPublicityTitle" :href="'http://creclb.cms/forum.php?mod=viewthread&tid=' + bp.tid" :title="bp.subject">[[bp.subject]]</a>
4 </li>

Vue v-if条件渲染
1、简单的v-if指令，代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
    <div id="id">
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#id",
        data:{
            flag:true
        }
    })
</script>
</html>

在控制台可以改变flag的值。

2、v-else

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

    <div v-if="num==10">
        num = {{num}}
    </div>
    <div v-else>
        num != 10
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            num:10
    }
    })
</script>
</html>

3、v-else-if

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
    <div v-if="message==='A'">
        str = {{message}}
    </div>
    <div v-else-if="message==='B'">
        str = {{message}}
    </div>
    <div v-else-if="message==='C'">
        str = {{message}}
    </div>
    <div v-else>
        str = null
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: 'B'
    }
    })
</script>
</html>

4、用key管理可复用元素

先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处，那就是在切换input时不会清楚里面的数据。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" >
    </span>
    <span v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" >
    </span>
    <button v-on:click="test">切换</button>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            loginType: 'username'
         },
        methods:{
            test:function(){
                if(this.loginType != 'username'){
                    return this.loginType = 'username'
                }
                return this.loginType = 'email'
            }
        }
    })
</script>
</html>

我么再看看使用key管理可复用元素。添加key属性，则这两个元素是相互独立，不再复用。这样当我们在切换input时里面的数据会被清除。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </span>
    <span v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </span>
    <button v-on:click="test">切换</button>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            loginType: 'username'
         },
        methods:{
            test:function(){
                if(this.loginType != 'username'){
                    return this.loginType = 'username'
                }
                return this.loginType = 'email'
            }
        }
    })
</script>
</html>

5、v-show & v-if

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

v-show 不支持语法，也不支持 v-else。

两者之间的区别：

v-if :

是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做

有很高的切换开销，适用于条件不太容易改变的时候

v-show:

不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
有很高的初始渲染开销，适用于非常频繁地切换

v-show的代码示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
   <div v-show="flag">
       you can see me
   </div>

</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag: true
         }
    })
</script>
</html>

6、v-if 和v-for 混合使用示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
   <div v-for="message in messageList" v-if="message.test == 'vue.js'">
      {{message.test}}
   </div>
    <br>------------完美的分隔线--------------</br>
    <div v-for="message in messageList">
        <span v-if="message.test == 'vue.js'">{{message.test}}是一种很好用的前台框架</span>
        {{message.test}}
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            messageList: [
                {test:'java'},
                {test:'vue.js'},
                {test:'liunx'}
            ]
         }
    })
</script>
</html>