AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue框架的学习(Vue操作指令学习三 V-bind )第三课

2023-07-16 96
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue框架的学习(Vue操作指令学习三 V-bind )第三课

案例一 V-bind基本操作 通过这个案例了解基本的操作

   <div id="app">
       <img src="./img/1-1 (1).jpg" alt="">
       <!--! 绑定图片利用V-bind指令 -->
       <img v-bind:src="imageSrc">
       <img :src="imageSrc1">
       <!-- !<img src="imageSrc2"> -->
       <!-- !绑定链接 -->
       <a v-bind:href="urlHref">语法的综合案例.html</a>
       <!--! 动态绑定元素 -->
       <!-- !给H2标签中增加style样式 -->
       <h2 :class="{active:isactive}" @click="change">{{msg}}</h2>
       <h2 :class="{active2:isactive}" @onmouseover="add">{{msgs}}</h2>
       <h2 :class="changeActive()" @click="change">{{msg}}</h2>
       <!--! onmouseout 鼠标移出时 鼠标 -->
       <!--! onmouseover  鼠标移入时 鼠标 -->
       <!--! V_bind绑定对象 -->
       <h1 :class="active2">{{bigname}}</h1>
       <h1 :class="a">{{bigname}}</h1>
   </div>

 const app = Vue.createApp({
             data: function () {
                 return {
                     imageSrc: './img/1-1 (1).jpg',
                     imageSrc1: './img/1-1 (2).jpg',
                     imageSrc2: './img/1-1 (3).jpg',
                     urlHref: '语法的综合案例.html',
                     msg: "我是动态的对象对所在的对象动态绑定事件",
                     isactive: false,
                     msgs: "我是动态的对象对所在的对象动态绑定事件",
                     bigname:'V_bind绑定对象 ',
                     active:'active',
                     active2:'active2',
                 }
             },
             methods: {
                 change() {
                     this.isactive = !this.isactive
                 },
                 changeActive() {
                     return { active: !this.isactive }
                 },
                 add(){
                     this.isactive2 = !this.isactive2
                 }
             }
         })
         app.mount("#app")
     }
 <script>
     function FistFunctionFmethod() {
         alert("开始学习Vue.js")
     FistFunctionFmethod()
 </script>

案例二 Class绑定对象  代码上都有注释

 

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 16:06:20
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 21:29:35
 * @FilePath: \com.Html\Com.Vue\模板语法\Class绑定对象.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    .active {
        border: 1px solid red;
        width: 600px;
        height: 600px;
        background-color: rgb(215, 255, 242);
    }
    .error {
        background-color: rgb(153, 231, 249);
        border: 2px solid green;
        opacity: 0.5;
        height: 200px;
    }
    .font{
        font-size: 30px;
    }
</style>
<body>
    <div id="app">
        <!-- 用户绑定的类想属性为v-bind 当自己绑定 的active 为 false是不显示 为true是显示 -->
        <div v-bind:class="{active: isActive,error: isError,font:isActive}">我是改变用户信息的内容</div>
        <!-- !当用户点击时切换内容 -->
        <button v-on:click='handle'>切换</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
    </script>
</body>
</html>

 function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        isActive: false,
                        isError: true
                    }
                },
                methods: {
                    handle: function () {
                        // 控制isActive的值在true和false之间进行切换
                        this.isActive = !this.isActive;
                        this.isError = !this.isError;
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()

案例三 绑定Class的基本使用

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 09:08:15
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 21:35:55
 * @FilePath: \com.Html\Com.Vue\模板语法\html\index8.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .active {
            color: red;
        }
        .active1 {
            color: rgb(0, 255, 157);
        }
        .active2 {
            color: lightcoral;
        }
        .active3 {
            color: rgb(31, 168, 0);
            background-color: black;
            border-radius: 12px;
            text-align: center;
        }
    </style>
    <div id="app">
        <!--! 绑定的用户色彩属性 -->
        <h1 v-bind:class="active">{{message}}</h1>
        <h1 v-bind:class="active1">{{message}}</h1>
        <!-- 为什么没有效果 -->
        <h1 :class="active2">{{message}}</h1>
        <h1 :class="active3">{{message}}</h1>
        <!-- <h1 v-bind:class="{'active':isShow,'active1':!isShow}">{{message}}</h1> -->
        <h1>{{text}}</h1>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- <script src="../js/vue.js"></script> -->
    <script>
    </script>
</body>
</html>

  function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        message: "数据内容一",
                        text: "数据内容二",
                        active: "active",
                        isShow: true,
                        active1: "active1",
                        fons: 'fons',
                        active3:'active3 '
                    }
                },
                methods: {
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()

案例四 绑定style

 

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 18:29:10
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 18:47:11
 * @FilePath: \com.Html\Com.Vue\模板语法\html\绑定style.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 style="background-color:red ;">{{mst}}</h1>
        <h1 :style="{backgroundColor:'yellow'}">{{mst}}</h1>
        <h1 :style="{'background-Color':'green'}">{{mst}}</h1>
        <h1 :style="{color:yu}">{{mst}}</h1>
        <!-- 绑定style样式一定使用的是对象 -->
        <h1 :style="styleObj">{{mst}}</h1>
        <h1 :style="setSytle()">{{mst}}</h1>
        <!-- 数组绑定 -->
        <h1 :style="[styleObj,{textAlign:'center'}]">{{mst}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        mst: "V-bind绑定Style样式",
                        yu: 'red',
                        // 在对象中定义文本标签内容的属性
                        styleObj: {
                            backgroundColor: 'pink',
                            fontSize: '100px',
                            border: '2px solid yellow',
                            fontSize:"30px"
                        }
                    }
                },
                methods: {
                    setSytle: function () {
                        return {
                            backgroundColor: 'blue',
                            fontSize: '40px',
                            border: '2px solid yellow'
                        }
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

案例五 绑定class对象 数组

 

 

 

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 17:46:46
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 20:30:18
 * @FilePath: \com.Html\Com.Vue\模板语法\html\绑定class.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定数组对象</title>
</head>
<style>
    .active {
        color: red;
        background-color: rgb(0, 255, 13);
    }
    .active1 {
        /* color: cadetblue; */
        color: rgb(255, 255, 255);
        background-color: black;
    }
    .fons {
        font-size: 50px;
    }
</style>
<body>
    <div id="app">
        <h1 v-bind:class="actives?'active':'active1'">{{me}}</h1>
        <!-- V-bind绑定对象 -->
        <!-- !方式一绑定的Class的属性-->
        <h1 v-bind:class="{fons:true,active:true,active1:true}">{{me}}</h1>
        <!-- !方式二 利用对象 -->
        <h1 v-bind:class="obj">{{me}}</h1>
        <h1 v-bind:class="setColor()">{{me}}</h1>
        <!-- 数组的绑定 -->
        <h1 v-bind:class="[actives,fons,active1,obj]">{{me}}</h1>
        <button type="" @click="update">按钮</button>
    </div>
  <script src="https://unpkg.com/vue@next"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        me: "我是我你是谁谁试试",
                        //    信息注册
                        actives: true,
                        active1: 'active1',
                        fons: 'fons',
                        obj: {
                            fons: 1,
                            active: undefined,
                            active1: 1,
                            actives:'active'
                        }
                    }
                },
                methods: {
                    update() {
                        this.actives=!this.actives
                        // this.obj.fons = false
                    },
                    setColor() {
                        return {
                            fons: this.actives,
                            active: this.actives, 
                            active1: this.actives
                        }
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

案例六 自定义绑定属性

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 18:50:39
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 18:57:00
 * @FilePath: \com.Html\Com.Vue\模板语法\html\自定义绑定属性.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        [asdf] {
            color: red;
        }
    </style>
    <div id="app">
        <h1 :[name]="123">{{message}}</h1>
        <h1 v-bind="obj">{{message}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        message: "数据内容一",
                        name: "asdf",
                        obj: {
                            names: 'yuio',
                            age: 29,
                            height: 1.8
                        }
                    }
                },
                methods: {
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

文章标签：
JavaScript
关键词：
VUE.js框架
学习VUE.js
vue学习VUE.js
vue指令VUE.js
指令VUE.js
t75yjb52rsccc
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
34 1
阿里巴巴叫我来巡山
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
57 17
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
42 0
阿逗
|
JavaScript API 前端开发
vue 不常见操作
对 v-html 的扩展操作，  问题产生背景， 在vue 项目中，用v-html渲染 html字符串，这里面包括a 标签等内容，因为某种需求，a 的默认跳转不符合要求，要经过自己定义的方法跳转。 原来的a  : eeee 处理后的： 正则匹配： export function handel ...
阿逗
1082 0
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
41 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1
雨溪-yuxi
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
38 1
vue学习第四章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
25 1
vue学习第7章(循环）
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
30 1
vue学习第九章(v-model)
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
44 1
vue学习第十章(组件开发）

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VUE3中watch与watchEffect —— 全网最详细系列
  • 3
    vue中关于element的el-image 图片预览功能增加一个下载按钮
  • 4
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 7
    vue中如何获取到当前位置的天气
  • 8
    vue3.0 bpmn-js + TS 简易教程
  • 9
    基于springboot+vue的医院预约系统(前后端分离)
  • 10
    Vue表格显示问题：v-show无法影响el-table-column列的解决方案
  • 1
    使用Vue.js构建交互式前端的技术探索
    92
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    170
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    133
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    151
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    193
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    112
  • 7
    vue3中使用动态组件
    108
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    146
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    125

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks售前咨询