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

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

2023-07-16 60
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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 VUE.js
学习VUE.js
vue指令VUE.js
指令VUE.js
VUE.js框架
t75yjb52rsccc
目录
相关文章
宁波阿成.
|
1天前
|
移动开发 前端开发 JavaScript
VUE3内置组件Transition的学习使用
VUE3内置组件Transition的学习使用
宁波阿成.
7 3
宁波阿成.
|
1天前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
宁波阿成.
8 1
周盛欢
|
1天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
周盛欢
4 0
周盛欢
|
1天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
周盛欢
5 0
1529723250799936
|
2天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
1529723250799936
8 2
1529723250799936
|
2天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
1529723250799936
6 0
1529723250799936
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
1529723250799936
7 1
宁波阿成.
|
2天前
|
JavaScript
vue里样式不起作用的方法，可以通过deep穿透的方式
vue里样式不起作用的方法，可以通过deep穿透的方式
宁波阿成.
9 0
阿逗
|
JavaScript API 前端开发
vue 不常见操作
对 v-html 的扩展操作，  问题产生背景， 在vue 项目中，用v-html渲染 html字符串，这里面包括a 标签等内容，因为某种需求，a 的默认跳转不符合要求，要经过自己定义的方法跳转。 原来的a  : eeee 处理后的： 正则匹配： export function handel ...
阿逗
1054 0
Goodluck-dys
|
3天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
Goodluck-dys
8 0

热门文章

最新文章

  • 1
    vue项目开发笔记记录（一）
  • 2
    vue项目开发笔记记录（二）
  • 3
    vue项目实战：实战技巧总结（中）
  • 4
    vue项目开发笔记记录（四）
  • 5
    vue element plus Input 输入框
  • 6
    vue核心语法2
  • 7
    vue element plus Descriptions 描述列表
  • 8
    【vue报错】error:0308010C:digital envelope routines::unsupported
  • 9
    vue element plus 快速开始
  • 10
    Vue3 子/父组件相互调用
  • 1
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    77
  • 2
    Vue中el与data的两种写法
    19
  • 3
    Vue之数据绑定
    14
  • 4
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    44
  • 5
    初识Vue 输出Hello World 及注意事项
    22
  • 6
    vue.js项目评估流程图特效
    87
  • 7
    如何在vue项目中优雅地使用SVG
    82
  • 8
    在Vue项目中，什么情况下需要使用错误处理机制？
    20
  • 9
    如何在Vue中使用第三方库？
    34
  • 10
    如何在 Vue 中进行国际化和多语言支持？
    42

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）