vue是如何绑定属性和class以及style的
下面我将会插入一段代码,本人在代码里做了相当详细的注释。
<template>
<!-- vue 的模板里面,所有的内容要被一个根节点包含起来-->
<div id="app">
<h3>{{msg}}</h3> <!-- 绑定业务逻辑里的数据-->
<br>
<div v-bind:title="title">鼠标悬停试试看,冒号后面的title是固定语法,详情可见官方文档</div>
<hr>
<img src="./assets/M.jpg"/>
<br>
<br>
<!-- 绑定属性 -->
<img v-bind:src="url"/><!-- 绑定了业务逻辑层里的url-->
<!-- 与下面这句语法效果一样 -->
<br>
<img :src='url'/>
<br>
<br>
<!--绑定HTML -->
{{h}}
<!--与下面显示效果完全不同,请注意页面的显示-->
<div v-html="h"></div>
<br>
<br>
<!-- 绑定数据的另一种方法 -->
<div v-text="msg">
</div>
<br>
<br>
<!-- v-bind:class :class的使用 -->
<div v-bind:class="{'red':flag}"> <!--red为在style中定义的一个class,会使用到'red' class里定义的样式。
flag为引用的一个属性(为true时执行),在逻辑层里定义-->
<!-- <div v-bind:class="'red'"> 这种语法格式就是普通格式,没有引用flag属性 -->
我是第一个div
</div>
<br>
<br>
<div :class="{'red':flag,'blue':!flag}"> <!--与上一种语法说明同理,只不过是多了一个'blue' class -->
我是第二个div
</div>
<br>
<br>
<!-- 循环数据 第一个数据高量 -->
<ul>
<li v-for="(item,key) in list"><!--可以看到增加了一个key,key为索引值从0开始-->
{{key}}---{{item}} <!--在页面中仔细查看输出-->
</li>
</ul>
<br>
<ul>
<li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
<!-- 这里的class指定了 key=0应用'red'样式,key=1应用'blue'样式-->
{{key}}---{{item}}
</li>
</ul>
<br>
<br>
<!-- v-bind:style :style的使用 -->
<div class="box" v-bind:style="{'width':boxWdith+'px','height':boxHeight+'px'}">
<!--应用'box'class——>绑定style属性——>手动改变width属性值需在逻辑层里添加boxWidth数据,height属性同理-->
<!--绑定class也可以用到上面所说的语法,<div v-bind:style="{'width':boxWdith+'px'}" :class="'box'">-->
我是另一个div
</div>
</div>
</template>
<script>
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字,可以删除
data () { //业务逻辑里定义的数据
return {
msg: '今天依然很好', // msg: "今天依然很好" 这里单引号和双引号是一样的结果
title:'这里是个标题',
//url:require('./assets/M.jpg'), //在这里定义了url
url:'./static/M.jpg', //此种路径问题也是一个重点问题,在此先不做讲解
h:'<h3>这里是一个h标签</h3>', //在逻辑层里写上HTML,需要在template绑定才可以正常显示
flag:true,
list:['123','456','789'],
boxWdith:500,
boxHeight:500
}
}
}
</script>
<style>
.red{
color: red;
}
.blue{
color:blue;
}
.box{
height: 100px;
width: 100px;
background: red;
}
</style>
最后的运行效果是这样的
每一幅图都是连在一起的,一共有三张图。关于src路径问题,我将会在下一篇文章里做详细讲解。
这是自己在学习过程中所作的一个小总结,若有疑问或是不解请在下方评论,谢谢。