vue属性指令

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量1k 收藏 10
点赞数 12
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58310590/article/details/139050640
版权

【 属性指令 】

# 控制属性的
v-bind:属性名='值'
# 可以简写成
:属性='值'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <style>
        img{
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class = one>
    <p>属性指令</p>
    <!-- v-bind:属性名='变量' -->
    <!-- :属性名='变量' -->
    <img :src="image">

</div>

<script>
    var vm = new Vue({
        el: '.one',
        data:{
            image:'img/14.jpg'
        }
    })
</script>
</body>
</html>

  • 切换图片跟轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <style>
        img {
            height: 300px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class=one>
    <p>属性指令</p>
    <!-- v-bind:属性名='变量' -->
    <!-- :属性名='变量' -->
    <img :src="image">
    <br>
    <button @click="clickone">点击切换</button>
    <button @click="clicktwo">选秀开始</button>

</div>

<script>
    var vm = new Vue({
        el: '.one',
        data: {
            image: 'img/14.jpg',
            images: ['img/14.jpg', 'img/16.jpg'],
            timer: null,
            index: 0
        },
        methods: {
            clickone() {
                //切换到下一张图片
                this.index = (this.index + 1) % this.images.length
                this.image = this.images[this.index];

            },
            clicktwo() {
                if (this.timer != null) {
                    //停止定时器
                    clearInterval(this.timer)
                    this.timer = null
                } else {
                    //启动定时器
                    //使用定时器
                    var image_list = [
                        'img/20.jpg',
                        'img/21.jpg',
                        'img/22.jpg',
                        'img/23.jpg',
                        'img/24.jpg',
                        'img/15.jpg',
                    ]
                    var _this = this
                    var num = 0
                    this.timer = setInterval(function () {
                        _this.image = image_list[num]
                        num += 1
                        // 判断是否到达最后一张图片
                        if (num >= image_list.length) {
                            num = 0; // 重置为第一张图片
                        }
                    }, 1000)
                }
            }
        }
    })

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

style和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <style>
        img{
            height: 300px;
            width: 300px;
        }
        .red {
            background-color: mediumvioletred;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>

<div class="one">
    <img :src="image" alt="" v-show="ishow">
    <p @click="hand" style="color: aqua">点我点我</p>
    <br>
    <br>
    <button @click="backyun">点我切换背景色！！</button>
    <hr>
    <div :class="backing">
        点我就对了
    </div>
</div>

<script>


    var vm = new Vue ({
        el: ".one",
        data: {
            image: 'img/14.jpg',
            ishow:false,
            backing: "blue"
        },
        methods: {
            hand() {
                this.ishow = !this.ishow;
            },
            backyun(){
                this.backing = this.backing == "blue" ? "green" : "red";
            }
        }
    })
</script>

</body>
</html>

image-20240425212150834

​ style和class是两个常用的属性，用于动态设置元素的样式和类。以下是它们的使用方法及注意事项总结：

1. Style属性的方法：

  • 字符串形式： 直接将样式字符串赋给:style，例如：:style="'background-color: aqua; height: 250px; width: 250px; font-size: 60px;'"。
  • 数组形式： 将包含多个样式对象的数组赋给:style，例如：:style="[{ 'background-color': 'green' }, { height: '300px' }, { width: '300px' }]"。
  • 对象形式： 将样式对象直接赋给:style，例如：:style="{ backgroundColor: 'red', height: '360px', width: '300px' }"。
  • 注意事项：
    • 使用对象形式时，属性名要使用驼峰命名法。
    • 使用数组形式时，每个样式对象都是独立的，可以单独修改，但无法添加新的响应式属性。

2. Class属性的方法：

  • 字符串形式： 直接将类名字符串赋给:class，例如：:class="'div1 div2'"。
  • 列表形式： 将包含类名的数组赋给:class，例如：:class="['div1', 'div2']"。
  • 对象形式： 将包含类名及其对应的布尔值的对象赋给:class，例如：:class="{ div1: true, div2: true, div3: false, div4: true, red: true }"。
  • 注意事项：
    • 使用对象形式时，键为类名，值为布尔值，控制类名的显示与隐藏。
    • 使用数组形式时，每个类名都是独立的，可以单独修改，但无法添加新的响应式类名。

3. 注意事项：

  • 若要动态添加或删除样式或类名，应当通过Vue.js提供的响应式方法，如Vue.set()或Vue.js的数据绑定方式来操作，以确保响应式更新生效。
  • 在使用响应式数据更新样式或类名时，要注意避免直接修改数组或对象，应当使用Vue.js提供的响应式方法进行修改。
# 1 style和class 也是属性，比较特殊--》单独再讲讲

# 2 class 可以绑定 字符串，数组，对象
	字符串： 'div1 div2'---》字符串替换控制样式
    数组：['div1','div2']--->追加数组，删除数组控制样式
    对象：{div1: true, div2: true, div3: true, div4: false}--》通过true和false控制样式
    
# 3 style 可以绑定 字符串，数组，对象
	字符串'background-color: green;height: 300px;width: 300px'---》字符串替换控制样式
    数组：[{'background-color': 'green'}, {height: '300px'}, {width: '300px'}]--->追加数组，删除数组控制样式
    对象：{backgroundColor: 'green', height: '330px', width: '300px'} --》通过根据key修改value控制样式

    
    
# 4 坑:以后如果改了对象，或数组，发现页面没有变化，实际上值被真正的改了
	Vue.set(this.style_list,3,{'margin':'auto'})
    
# 5 哪个操作会触发响应式？哪个不会？
	-不用记----》以后有问题--》使用Vue.set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <style>
        img {
            height: 300px;
            width: 200px;
        }

        .div1 {
            /* 宽高 */
            height: 300px;
            width: 300px;
        }

        .red {
            background-color: mediumvioletred;
        }

        .green {
            background-color: green;
        }

        .div2 {
            /* 背景色 */
            background-color: lightpink;
        }

        .div3 {
            /* 字体 */
            font-size: 60px;
        }

        .div4 {
            /* 居中 */
            margin: auto;
        }

    </style>
</head>
<body>

<div id="app">
    <img :src="image" alt="" v-show="ishow">
    <p @click="hand" style="color: aqua">点我点我</p>
    <br>
    <br>
    <button @click="backyun">点我切换背景色！！</button>
    <hr>
    <div :class="backing">
        点我就对了
    </div>


    <h2>class属性方法</h2>
    <!--<div :class="class_str">wis</div>-->

    <!--<div :class="class_list">wis</div>-->

    <div :class="class_obj">wis</div>

    <button @click="handtext">点点点我</button>

    <hr>

    <h2>style属性的方法</h2>
    <!--   字符串 -->
    <!--    <div :style="style_json">style属性</div>-->
    <!--    数组 -->
<!--    <div :style="style_list">style属性</div>-->
    <!--    对象 -->
        <div :style="style_obj">style属性</div>

    <button @click="handstyle">点点点点</button>

</div>
<script>


    var vm = new Vue({
        el: "#app",
        data: {
            image: 'img/14.jpg',
            ishow: false,
            backing: "blue",
            //字符串
            class_str: "div1 div2",
            //列表格式
            class_list: ["div1", "div2"],
            // 对象的格式
            class_obj: {div1: true, div2: true, div3: false, div4: true, red: true},

            //style字符串
            style_json: "background-color: aqua;height: 250px;width:250px;",
            //style数组
            style_list: [{'background-color': 'green'}, {height: '300px'}, {width: '300px'}],
            // style对象
            style_obj: {backgroundColor: 'red',height: "360px",width:'300px'},
        },
        methods: {
            hand() {
                this.ishow = !this.ishow;
            },
            backyun() {
                this.backing = this.backing == "blue" ? "green" : "red";
            },
            handtext() {
                // 字符串格式
                // this.class_str = 'div1 div2 div3 div4'‘
                // 列表格式
                // this.class_list.push("div3");
                // 删除 默认末尾
                // this.class_list.pop()


                // 对象
                this.class_obj.div3 = true

            }
            ,
            handstyle() {
                //     字符串形式
                // this.style_json = "background-color: aqua; height: 250px; width: 250px; font-size: 60px;margin: auto;";
                // 数组形式
                // this.style_list.push({"margin": "auto"}, {"font-size": "60px"})

                // 换背景色
                // 第一种方法
                // this.style_list[0]['background-color'] = 'black';
                //第二种方法
                // Vue.set(this.style_list,0,{"background-color": "pink"});

                //对象形式
                // this.style_obj["font-size"] = "60px" // 这个就是原来列表中没有，后来在加进去，就不会触发响应式。

                //使用set解决
                Vue.set(this.style_obj,"font-size","60px");
            }
        }
    })
</script>

</body>
</html>

image-20240425212910816

m0_58310590
关注
  • 12
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue常用指令
qq_42839746的博客
04-24 4203
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
vue内置指令详解
08-27
v-bind 指令用于响应并更新 DOM 特性，例如绑定属性，动态更新 HTML 元素上的属性。其基本语法为：<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...，或使用缩写：...
vue属性绑定指令
m0_65063660的博客
08-26 754
在开发中使用频率非常高，因此，vue 官方为其提供了。在 vue 提供的模板渲染语法中，除了支持。支持Javascript 表达式的运算。
彻底整明白Vue属性和指令
zag666的博客
04-19 1653
Vue实例的作用范围：el选项命中的元素及其内部的后代元素。 可以选择其他的选择器，但建议使用ID选择器。
Vue自定义指令
qq_46149597的博客
11-05 1万+
Vue自定义指令，全局、局部自定义指令，指令定义对象的钩子函数，自定义指令的绑定值
vue3 指令详解
枫ゞ的博客
01-07 2033
Vue 中的指令是用来操作DOM元素的特殊属性，它们可以在模板中使用，并且通过Vue实例的指令选项进行自定义。
Vue指令介绍及使用
AI_huihui的博客
11-06 2164
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue 的指令
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue自定义指令
xiaonankeji的博客
12-12 8318
vue自定义指令，自定义指令传参，自定义指令实现拖拽、防抖
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
vue 自定义指令
似水流年QC的博客
07-03 1145
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。
vue自定义指令实现方法详解
10-17
在上面的例子中，`v-color`是一个自定义指令，`red`是绑定的值，可以通过Vue实例的数据属性访问。 ### 四、示例 #### 1. 颜色改变示例 ```html 我是自定义指令 ``` ```javascript Vue.directive('color', { ...
Vue自定义指令详解
08-29
Vue自定义指令详解 在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册...
Vue指令指令大全
01-19
为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html=rawHtml></div> 这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。 3. v-pre v-pre主要用来跳过这个元素和它的子...
Vue自定义指令介绍(2)
09-01
在这个例子中，我们不仅改变了元素样式，还通过`Vue`实例的`data`属性`info`展示了指令的相关信息。 总的来说，Vue自定义指令为开发者提供了极大的灵活性，能够处理复杂的DOM操作和用户交互，让前端开发更加高效且...
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 589
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 376
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 493
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
vue初使用实例之笔记本
m0_72168336的博客
06-11 838
vue初使用实例之笔记本
Vue自定义指令各个属性的讲解
07-14
Vue的自定义指令允许你在DOM元素上添加自定义行为。一个自定义指令可以包含多个属性，下面是一些常见的属性及其功能： 1. bind：指令第一次绑定到元素时调用，只调用一次。可以在这里进行初始的设置和准备工作。 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值