主要操作技能:
v-bind:title 鼠标移上的显示
v-bind:src 绑定图片路径
v-bind:html 绑定HTML文本和标签
v-bind:text 绑定文本
v-bind:class 绑定类样式
v-bind:style 动态绑定样式
编写代码
<template>
<div id="app">
<!--鼠标移上 v-bind:title -->
<div v-bind:title="title">
鼠标移上去看看哦!
</div><br />
<!--图片1 v-bind:src-->
<div>
<img v-bind:src="url" />
</div><br />
<!--图片2 属性:src-->
<img :src="url" /><br /><br />
<!--
绑定HTML标签输出
-->
<div v-html="htmls"></div><br />
<!-- 绑定数据另一个方法-->
{{msg}} 等同于 <span v-text="msg"></span><br />
<!--v-bind:class类样式-->
<div v-bind:class="{'my':flag}">this is test v-bind class</div><br />
<div v-bind:class="{'my':flag,'your':!flag}">this is test v-bind class</div><br />
<!--直接用属性:class类样式-->
<div :class="{'my':!flag}">this is test v-bind class</div><br /><br />
<!-- 循环数据-->
<ul>
<li v-for="it in list">
{{it}}
</li>
</ul>
<br />
<!-- 循环数据使用样式-->
<ul>
<li v-for="(it,key) in list" :class="{'my':key==0,'your':key==1}">
{{key}}==>{{it}}
</li>
</ul><br />
<!--v-bind:style style使用动态改变宽样式 ,必须加px哦!-->
<div class="box" v-bind:style="{width:boxWdith+'px'}">
盒子
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App',
title:'我是一个标题哦!',
// url:'https://goss4.vcg.com/creative/vcg/material/400/VCG211161017213.jpg',
url:'https://goss2.vcg.com/creative/vcg/material/400/VCG211161017209.jpg',
htmls:'<h3>helloworld</h3>',
flag:false,
list:['aaa','bbb','ccc','ddd'],
boxWdith:400 //宽度
}
}
}
</script>
<style lang="scss">
.my{
color:darkgoldenrod;
font-weight: bolder;
}
.your{
color:blue;
font-size: 15px;
}
.box{
width: 100px;
height: 100px;
background: coral;
}
</style>
效果: