GuLi商城-前端基础Vue指令-单向绑定双向绑定

news2024/11/17 7:38:11

什么是指令?

指令 (Directives) 是带有 `v-` 前缀的特殊特性。

指令特性的预期值是:单个 JavaScript 表达式。

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM

例如我们在入门案例中的 v-on,代表绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   
    <div id="app">
        {{msg}}  {{1+1}}  {{hello()}}<br/>
        <span v-html="msg"></span>
        <br/>
        <span v-text="msg"></span>

        
    </div>
   
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
        })
    </script>
    
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <!-- 给html标签的属性绑定 -->
    <div id="app"> 

        <a v-bind:href="link">gogogo</a>

        <!-- class,style  {class名:加上?}-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
          :style="{color: color1,fontSize: size}">你好</span>


    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                link: "http://www.baidu.com",
                isActive:true,
                hasError:true,
                color1:'red',
                size:'36px'
            }
        })
    </script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


    <!-- 表单项,自定义组件 -->
    <div id="app">

        精通的语言:
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        选中了 {{language.join(",")}}
    </div>
    
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>

</body>
</html>

注意:页面上显示的是小写的java,操作的是value里面大写的Java 

谷粒商城项目4——前端基础 Vue框架的属性 ES6前端编程规范学习_谷粒商城mvvm思想_HotRabbit.的博客-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/906627.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IO多路复用(poll:与select类似,当监测的文件描述符有一个或多个就绪时,执行对应的IO操作

使用poll实现TCP循环服务器接收客户端消息并打印 服务器 客户端 写一个makefile方便使用 结果 笔记

611. 有效三角形的个数

611. 有效三角形的个数 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 611. 有效三角形的个数 https://leetcode.cn/problems/valid-triangle-number/description/ 完成情况&#xff1a; 解题思路&#xff1a; …

第一篇:编写 Hello World 程序

编写 Hello World 程序 Hello World 程序就是让应用程序显示 Hello World 字符串。这是最简单的应用&#xff0c;但却包含了一个应用程序的基本要素&#xff0c;所以一般使用它来演示程序的创建过程。本章要讲的就是在Qt Creator 中创建一个图形用户界面的项目&#xff0c;从而…

什么是数字化?什么是数字化转型?为什么企业选择数字化转型?

数字化&#xff1a; 数字化是指将模拟信息或物理对象转换为数字格式的过程。这涉及将数据、文档、图像、视频和其他形式的信息转换为可以以电子方式处理、存储和传输的二进制代码。与传统的模拟方法相比&#xff0c;数字化可以更有效地存储、检索和操作数据。 数字化转型&…

3D医学教学虚拟仿真系统:身临其境感受人体结构和功能

3D医学教学虚拟仿真系统是一种基于虚拟现实技术的教学工具&#xff0c;它可以帮助学生更好地理解和掌握医学知识。这种课件通常包括人体解剖学、生理学、病理学等方面的教学内容&#xff0c;通过三维立体的图像和动画展示&#xff0c;让学生更加直观地了解人体结构和功能。 与传…

.IFC文件如何打开【在线工具】

IFC文件是以工业基础类&#xff08;IFC&#xff09;格式创建的模型文件&#xff0c;这是建筑信息模型&#xff08;BIM&#xff09;程序使用的开放文件格式。它包含建筑物或设施模型&#xff0c;包括空间元素、材料和形状。 IFC&#xff08;工业基础类&#xff09;数据格式是建…

长胜证券:市场持续震荡 低位布局时机或已来临

业内人士表明&#xff0c;出资者心情的动摇起伏会大于商场价格&#xff0c;同时出资者心情的最高点和最低点往往滞后于商场价格的最高点和最低点&#xff0c;所以当商场动摇较大时&#xff0c;从心情动身去做决策往往不可能收到很好的出资效果。而当咱们以长期的心态参加出资&a…

学习开发振弦采集模块的注意事项

学习开发振弦采集模块的注意事项 &#xff08;三河凡科科技/飞讯教学&#xff09;振弦采集模块是一种用来实时采集和处理振弦信号的电子设备&#xff0c;在工业、航空、医疗等领域都有广泛应用。学习开发振弦采集模块需要注意以下几点&#xff1a; 一、硬件选择 首先需要选择…

汽车行业必读:ISO 26262和ASIL安全等级解读与攻略

ISO 26262&#xff0c;名称为“道路车辆——功能安全”&#xff0c;是汽车行业中使用的功能安全标准。而ASIL/ASIL级别则是确定软件开发安全要求的关键组成部分。 遵守这一标准对于汽车产品的开发来说至关重要。原始设备制造商、供应商和汽车零部件开发商们都需要遵守这一标准…

【C++】基础:动态内存与智能指针

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍动态内存与智能指针。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&a…

57从零开始学Java之一文详解String字符串的底层实现原理

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 在之前的两篇文章中&#xff0c;壹哥给大家介绍了String字符串及其常用的API方法、常用编码、正则表达…

rfc7234之http缓存

缓存概念 缓存处理请求步骤 缓存如果查询到某个请求已经有缓存&#xff0c;那么需要进一步检查该资源的新鲜度&#xff0c;根据新鲜度和请求中的字段综合评估是否要去服务端拉取新鲜的资源。 注意&#xff1a; 创建响应时候要注意版本匹配&#xff0c;如果服务器响应和客户端…

计算机竞赛 垃圾邮件(短信)分类算法实现 机器学习 深度学习

文章目录 0 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 垃圾邮件(短信)分类算…

docker 03(docker 容器的数据卷)

一、数据卷的概念和作用 删除后&#xff0c;数据也没了。 不能 数据卷 是宿主机中的一个目录或文件当容器目录和数据卷目录绑定后&#xff0c;对方的修改会立即同步一个数据卷可以被多个容器同时挂载 作用&#xff1a; 容器数据持久化 外部机器和容器间接通信 容器之间数据交换…

数据结构(2)

冒泡排序&#xff1a; 1.比较相邻的两个元素。如果前一个元素比后一个元素大&#xff0c;则交换两者位置。 2.对每一对相邻元素做相同工作&#xff0c;从第一对元素到最后一对元素&#xff0c;最后的一个元素就是最大的元素。 for(int ia.length-1;i>0;i--){for (int j 0…

Canvas绘制毛玻璃背景分享海报

最近重新设计了分享海报&#xff0c;用毛玻璃作为背景&#xff0c;使整体更有质感&#xff0c;如果没有用到canvas&#xff0c;毛玻璃效果其实很好实现&#xff0c;给元素添加一个滤镜即可&#xff08;比如&#xff1a;filter: blur(32px)&#xff09;&#xff0c;但是实践的过…

HTTPS代理搭建技巧分享

今天我们来分享一下如何搭建一个能够实现中间人 检测和防护的HTTPS代理。保护我们的网络通信安全是至关重要的&#xff0c;让我们一起学习如何构建一个安全可靠的HTTPS代理吧&#xff01; 什么是中间人 &#xff1f; 首先&#xff0c;让我们来了解一下什么是中间人 。中间人 是…

html表格中加入斜线,使用css给table表格表头单元格添加斜线

背景&#xff1a;业务给了90张word电子表格&#xff0c;需要用html设计出来。 如图所示&#xff0c;红色区域的下斜线如何实现&#xff1f; 先说结论&#xff1a;html中table没有直接的斜线表头标签&#xff0c;但结合css、svg之类的可以实现。 #lineTd{ background:#FFFFFF u…

Leetcode67 二进制求和

给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 代码 class Solution {public String addBinary(String a, String b) {StringBuilder res new StringBuilder();int carry 0;int i a.length() - 1, j b.length() - 1;while(i > 0 || j &…

『吴秋霖赠书活动 | 第一期』《强化学习:原理与Python实战》

文章目录 一、什么是RLHF&#xff1f;二、RLHF适用于哪些任务&#xff1f;三、RLHF和其他构建奖励模型的方法相比有何优劣&#xff1f;四、什么样的人类反馈才是好的反馈五、RLHF算法有哪些类别&#xff0c;各有什么优缺点&#xff1f;七、如何降低人类反馈带来的负面影响&…