Vue基础语法属性绑定:style :class :id(三)

满脑子技术的前端工程师

已于 2023-01-29 21:27:54 修改

阅读量703

点赞数

分类专栏： VUE 文章标签：前端 vue.js 前端框架 javascript

于 2021-12-02 19:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/121663764

版权

VUE 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
前言
一、属性绑定
完整代码

前言

一、属性绑定

 		<p v-bind:id="msg">通过v-bind进行属性的绑定</p>
        <!-- //简化写法 v-bind: 可以简化成单独的 : -->
        <p :class="c1">如果绑定的是字符串,字符串就是类名</p>

 		//绑定arr是数组,可以向arr: []  存入数据
 		<input type="checkbox" name="style" value="backg" v-model='arr'>
        <input type="checkbox" name="style" value="color" v-model='arr'>
        <input type="checkbox" name="style" value="fontw" v-model='arr'>
        <p :class=arr>给class绑定一个数组,class会直接绑定数组中的每一个元素;添加的样式:{{arr}}</p>
        <br>
        <hr>

		//按钮中的内容,就是对应的点击事件
        <hr>
        <p :class="classobj">class绑定一个对象,对象的属性就是类名,对象的属性值是boolean值(可以设置true和false)</p>
        <br>
        <hr>
        <p :style="obj2">style属性可以绑定对象,对象的属性就是样式</p>

完整代码

<body>
    <div id="app">
        <p v-bind:id="msg">通过v-bind进行属性的绑定</p>
        <!-- //简化写法 v-bind: 可以简化成单独的 : -->
        <p v-bind:id="msg">通过v-bind进行属性的绑定</p>
        <p :class="c1">如果绑定的是字符串,字符串就是类名</p>
        <hr>
        <br>
        <input type="checkbox" name="style" value="backg" v-model='arr'>
        <input type="checkbox" name="style" value="color" v-model='arr'>
        <input type="checkbox" name="style" value="fontw" v-model='arr'>
        <p :class=arr>给class绑定一个数组,class会直接绑定数组中的每一个元素;添加的样式:{{arr}}</p>
        <br>
        <hr>
        <p :class="classobj">class绑定一个对象,对象的属性就是类名,对象的属性值是boolean值(可以设置true和false)</p>
        <br>
        <hr>
        <p :style="obj2">style属性可以绑定对象,对象的属性就是样式</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    //如果组件对象中有el配置,这个组件是根组件,一个项目中只有一个根组件.根组件中通过data配置,是一个对象类型.
    //创建一个组件对象
    var app = new Vue({
        //渲染的位置,vue对象和模板进行关联
        el: "#app",
        //数据(data中的数据都具有响应式的效果)
        data: {
            msg: 'nihao',
            c1: 'color',
            arr: [],
            classobj: {
                color: true,
                backg: true,
                fontw: true
            },
            obj2: {
                backgroundColor: 'aqua',
                fontSize: '25px'
            }
        },

    })
</script>

满脑子技术的前端工程师

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue基础语法属性绑定:style :class :id(三)

1.通过v-bind进行属性的绑定 2.如果绑定的是字符串,字符串就是类名 3.给class绑定一个数组,class会直接绑定数组中的每一个元素;添加的样式:{{arr}}
复制链接

扫一扫