Vue学习--基本语法

最新推荐文章于 2023-12-14 10:11:39 发布

theLuckyLong

最新推荐文章于 2023-12-14 10:11:39 发布

阅读量120

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/theLuckyLong/article/details/115333647

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-bind

通过v-bind，可以将Vue对象中data域中的数据与前端的Dom对象的属性值进行绑定。具体使用方式如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js文件-->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <span v-bind:title="msg">鼠标悬停查看</span><br/>
    </div>



<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "哈哈" + new Date(),
        }
    });
</script>
</body>
</html>

这里使用v-bind时，需要引入命名空间。
我们将span标签中的title属性值与Vue对象中的data域中的msg进行绑定。
这相当于：

<span title="msg">鼠标悬停查看</span>

这种以 ‘v-’ 开头的成为指令，表示它们是Vue提供的特殊特性

v-if , v-else(v-else-if)

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue的js文件-->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-if="isOK">Yes</h1>
        <h1 v-else>No</h1>
    </div>



<script>
    let vm = new Vue({
        el: "#app",
        data: {
           isOK: true   //这是一个布尔值
        }
    });
</script>
</body>
</html>

v-if的值只有true/false两种，如果v-if的值为true，则显示其所在标签中的值，否则显示v-else所在标签中的值。
这里有一个问题，如果data数据域中的值为如下表示方式，该如何使用v-if呢？

data: {
    isOK: "true"   //这是一个字符串
}

解决方法：

<h1 v-if=" isOK === 'true' ">Yes</h1>
<h1 v-else>No</h1>

v-for

这个指令有点类似于foreach循环

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>
    <div id="vueScope">
        <ul>
           <li v-for="movie in movies">{{movie}}</li> 
	    </ul> 
    </div>


<script>

    //实例化Vue对象
    let vueApp = new Vue({
        el: "#vueScope", //定义vue作用的前端标签处
        data: {//里面存放前端所需要的数据
            movies: ["大话西游","功夫","赌圣","逃学威龙"]
        }
    });

</script>
</body>
</html>

v-for还支持第2个参数，即当前项的索引(index):

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

theLuckyLong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录