时间:2021-05-25
这两天学习了v-bind的基本用法,所以,今天添加一点小笔记。
1. v-bind:class(根据需求进行选择)
1.1
1.2
<style>.box{ background-color: #ff0;}.textColor{ color: #000;}.textSize{ font-size: 30px;}</style><div id="app"> <span class="box" :class="classObject">我是字</span></div><script>new Vue({el: "#app",data:{ classObject:{ 'textColor': true, 'textSize': true } }})</script>1.3
1.4
2.v-bind:style (根据需求进行选择,驼峰式)
2.1
<div id="app"> <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span></div><script> new Vue({ el: "#app", data:{ activeColor: 'red', size: '30px', shadow: '5px 2px 6px #000' }})</script>2.2
2.3
2.4
3.v-bind:src
<div id="app"> <img :src="url" /></div><script> new Vue({ el: "#app", data:{ url: "../img/pg.png" }})</script>4.v-bind:title
<div id="app"> <div :title="message">我是字</div></div> <script type="text/javascript"> new Vue({ el: "#app", data:{ message:"我是吱吱" } })</script>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue基础之v-bind属性、class和style用法。分享给大家供大家参考,具体如下:一、属性属性:v-bind:src=""width/he
引子v-bind主要用于属性绑定,Vue官方提供了一个简写方式:bind,例如:一、概述v-bind主要用于属性绑定,比方你的class属性,style属性,v
使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改;1.v-bind:class||v-bind:style其中v
一、v-bind初探它是一个vue指令,用于绑定html属性,如下:html属性不能使用双大括号形式绑定,只能使用v-bind指令......varvm=new
一.Vue中父组件向子组件传值利用v-bind向子组件传值,子组件中利用props接受{{name}}{{age}}{{parentname}}{{abc}}/