十五分钟速通Vue

news2024/11/16 6:09:08

绑值语法( {{}} )

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }]
      }
    })
  </script>
</body>

</html>

渲染html(v-html)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>'
      }
    })
  </script>
</body>

</html>

双向绑定(v-model)

双向绑定，同步更新

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: ''
      }
    })
  </script>
</body>

</html>

判断(v-if)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>
      
      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色'
      }
    })
  </script>
</body>

</html>

绑定属性(v-bind)

这个有更简写的版本，后面再补充

:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/'
      }
    })
  </script>
</body>

</html>

事件绑定(v-on)

@

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/'
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>

循环(v-for)

这里有些语法要精通一下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

    <div>
      <div v-for="(item,index) in fruits" :key="index">{{index + '.'+item}}</div>
      <div v-for="item in users" :key="item.name">{{item.name}}</div>
    </div>
  </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/',
        fruits: ['苹果', '香蕉', '橘子', '橘子'],
        users: [{ name: 'lmm' }, { name: 'gcd' }]
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>

动态class与style绑定

补一下，对象字面量语法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .active {
    color: red;
  }
</style>

<body>
  <div id="app">
    {{ message }}
    <div>
      <!-- {{num++}}，不要这么写，千万别在这里运算，否则可能出错 -->
      {{num}}
    </div>
    <div>{{bool}}</div>
    <div>{{ arr.find(v => v.name === '张三')?.age }}</div>

    <div v-html="htmlStr"></div>

    <div>
      <input type="text" v-model="count">
      <div>{{count}}</div>
    </div>


    <div>
      <div v-if="color === '红色'">红色</div>

      <div v-if="color === '蓝色'">蓝色</div>
      <div v-else>黑色</div>

    </div>

    <div>
      <!-- <a href="https://www.baidu.com/">百度一下</a> -->
      <!-- v-bind可以更灵活，不像这个是写死的 -->

      <a v-bind:href="url">搜索一下</a>
    </div>

    <div style="width: 100px; height: 100px; background-color: red;" v-on:click="clickDiv" id="testColor">
      点我
    </div>

    <div>
      <div v-for="(item,index) in fruits" :key="index">{{index + '.'+item}}</div>
      <div v-for="item in users" :key="item.name">{{item.name}}</div>
    </div>

    <div style="display: flex; margin-top: 30px;">
      <select v-model="currentMenu">
        <option value="首页">首页</option>
        <option value="教师">教师</option>
        <option value="学生">学生</option>
      </select>
      <!-- 动态绑定style和class -->
      <div style="padding: 0 10px;" :style="{fontSize: item === currentMenu?'20px':'14px'}"
        :class="{'active':item === currentMenu}" v-for="item in menus" :key="item">{{item}}
      </div>

    </div>
  </div>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }],
        htmlStr: '<strong>我是lmm</strong>',
        count: '',
        color: '红色',
        url: 'https://www.taobao.com/',
        fruits: ['苹果', '香蕉', '橘子', '橘子'],
        users: [{ name: 'lmm' }, { name: 'gcd' }],
        menus: ['首页', '教师', '学生'],
        currentMenu: '首页',
      },
      methods: {
        clickDiv() {
          let color = document.getElementById('testColor').style.backgroundColor
          if (color === 'red') {
            document.getElementById('testColor').style.backgroundColor = 'blue'
          }
          else {
            document.getElementById('testColor').style.backgroundColor = 'red'
          }
        }
      }
    })
  </script>
</body>

</html>

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

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

相关文章

热失控传感器在换电站消防安全解决方案中的应用

热失控传感器在换电站消防安全解决方案中的应用

随着新能源技术的飞速发展&#xff0c;工程车辆行业正逐步向绿色化、电动化转型&#xff0c;作为这一转型过程中的关键设施&#xff0c;换电站的数量日益增多。作为电池集中储存与交换的核心区域&#xff0c;换电站的消防安全问题成为了不容忽视的重大挑战。特别是电池仓&#…
阅读更多...
骑行适合戴的耳机？开放式耳机测评

骑行适合戴的耳机？开放式耳机测评

当我们在享受骑行的乐趣时&#xff0c;音乐往往是不可或缺的伴侣。但选择耳机却是一门学问&#xff0c;尤其是在安全和听觉享受之间找到平衡。今天&#xff0c;我就来和大家探讨一下&#xff0c;在骑行时究竟是选择开放式耳机还是封闭式耳机。 骑行时选择耳机的考量因素 1.安全…
阅读更多...
二手电脑配置给你不一样的成就感之三

二手电脑配置给你不一样的成就感之三

近期和着了魔一样&#xff0c;一直在搜罗二手乐色&#xff0c;之前说过的推荐配置基本都试了一遍&#xff0c;今天来说下APU系列和E3系列&#xff0c;还是那个选择&#xff0c;主板30以下&#xff0c;cpu二十以下&#xff0c;这次有增加了二手风扇&#xff0c;二手固态&#xf…
阅读更多...
vue part 5

vue part 5

生命周期 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>引出生命周期</title><!-- 引入Vue --><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quo…
阅读更多...
filezilla使用教程（window下filezilla使用教程）

filezilla使用教程（window下filezilla使用教程）

filezilla使用教程&#xff08;window下filezilla使用教程&#xff09; 一、安装与配置 首先&#xff0c;你需要从FileZilla的官方网站下载并安装适合你操作系统的版本。安装完成后&#xff0c;打开FileZilla&#xff0c;你将看到一个简洁的用户界面。 在FileZilla中&#x…
阅读更多...
day-43 Z 字形变换

day-43 Z 字形变换

思路 只需要依次按照行进行遍历即可 解题过程 第一行位置&#xff1a;0 2*(numRows-1) 4*(numRows-1) 第二行位置&#xff1a;1 2*(numRows-1)-1 2*(numRows-1)1 。。。。。。 注意&#xff1a;当numRows为1时&#xff0c;直接返回s Code class Solution {public String con…
阅读更多...
Android 获取安装包的签名，获取签名文件的MD5值

Android 获取安装包的签名，获取签名文件的MD5值

一般情况下通过下面的语句就开业获取MD5值； keytool -list -v -keystore 签名文件.jks -alias 别名也可以直接：keytool -list -v -keystore 签名文件.jks但结果只有SHA1和SHA256，没有MD5值； 是因为升级java JDK以后 keytool 不支持MD5，所以就需要像其他的办法； 解决办…
阅读更多...
西门子PLC、倍福PLC如何接入ThingsKit物联网平台？

西门子PLC、倍福PLC如何接入ThingsKit物联网平台？

随着工业4.0的推进&#xff0c;物联网(IoT)技术在智能制造领域的应用日益广泛。本文将探讨如何将西门子PLC和倍福PLC接入ThingsKit物联网平台&#xff0c;实现工业设备的远程监控与管理。 引言 在智能制造和工业自动化中&#xff0c;PLC&#xff08;可编程逻辑控制器&#xf…
阅读更多...
[000-01-001].第06节：Shell环境变量深入学习

[000-01-001].第06节：Shell环境变量深入学习

1、Shell环境变量深入&#xff1a;加载流程原理介绍 本节目标 1.能够说出交互式Shell与非交互式Shell2.能够说出登录Shell与非登录Shell环境 1.1.Shell工作环境介绍 用户进入linux系统就会初始化Shell环境, 这个环境会加载全局配置文件和用户个人配置文件中环境变量.每个脚本文…
阅读更多...
【项目篇】WS2812 炫彩LED灯驱动笔记（C51/STM32）

【项目篇】WS2812 炫彩LED灯驱动笔记（C51/STM32）

优信电子:51系列驱动WS2812 3528 幻彩雾状 贴片式发光二极管 XL-3528RGBW-WS2812B C51 驱动 使用 C51 单片机&#xff08;如 8051 系列&#xff09;驱动 WS2812 全彩 LED 需要仔细考虑 WS2812 的时序要求&#xff0c;因为 WS2812 使用的是单线通信协议&#xff0c;而 8051 系…
阅读更多...
JavaEE(2)：前后端项目之间的交互

JavaEE(2)：前后端项目之间的交互

现在&#xff0c;在网页中通过超链接&#xff0c;表单就可以向后端发送请求&#xff0c;后端也可以正常响应内容。 以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时&#xff0c;前端不能再进行其他操作 服务器端响应回来的内容&#xff0c;会把整个浏…
阅读更多...
1895. 二分查找右侧边界

1895. 二分查找右侧边界

代码 #include<bits/stdc.h> using namespace std; int a[100010],n,q; int yc(int x) {int l1,rn,mid;while(l<r){mid(lr)/2;if(x<a[mid]) rmid-1;else if(x>a[mid]) lmid1;}if(a[l-1]x) return l-1;else return -1; } int main() {int i,x;cin>>n;for(…
阅读更多...
迷雾大陆游戏辅助：VMOS云手机强势辅助宠物推荐！

迷雾大陆游戏辅助：VMOS云手机强势辅助宠物推荐！

在《迷雾大陆》游戏中&#xff0c;选择合适的宠物是提升战斗力的关键。通过使用VMOS云手机&#xff0c;你可以体验到更为顺畅的游戏过程。VMOS云手机为《迷雾大陆》专门定制了专属的云手机版本&#xff0c;内置游戏安装包&#xff0c;不需要重新下载安装。此外&#xff0c;VMOS…
阅读更多...
第一次使用Visual Studio社区版

第一次使用Visual Studio社区版

由于C代码的需要&#xff0c;我开始尝试使用VS。 下载 下载地址&#xff1a;https://visualstudio.microsoft.com/zh-hans/downloads/ 网上关于专业版的教程较少&#xff0c;所以我猜测需求不大&#xff0c;于是我也下载社区版。 安装地址&#xff1a; &#xff08;工作负荷…
阅读更多...
从 7000 余项目脱颖而出，飞轮科技《新一代实时分析数据仓库解决方案》荣获 HICOOL 2024 全球创业大赛二等奖

从 7000 余项目脱颖而出，飞轮科技《新一代实时分析数据仓库解决方案》荣获 HICOOL 2024 全球创业大赛二等奖

HICOOL 2024 全球创业者峰会于 2024 年 8 月 23 日 -25 日 在中国国际展览中心&#xff08;顺义馆&#xff09;成功举行&#xff0c;峰会以“新质引领 创新共融”为主题&#xff0c;聚焦技术创新、产业融合、新质共享与国际合作四大要素。 在 8 月 23 日晚的峰会开幕式上&…
阅读更多...
一文速学-零成本与数据沟通NL2SQL的概念和实现技术

一文速学-零成本与数据沟通NL2SQL的概念和实现技术

前言 关于NL2SQL的技术&#xff0c;如果大家最近有关注AI圈的话&#xff0c;或多或少都有所了解。其实很多业务场景下&#xff0c;于用户而言更多的是想要获取到最终数据的呈现效果&#xff0c;关于数据是如何获取得到的学习成本&#xff0c;是尽可能越少越好。众所周知当学习…
阅读更多...
零知识证明-椭圆曲线(四）

零知识证明-椭圆曲线(四）

前言 零知识证明(Zero—Knowledge Proof)&#xff0c;是指一种密码学工具&#xff0c;允许互不信任的通信双方之间证明某个命题的有效性&#xff0c;同时不泄露任何额外信息 上章介绍了基础数字知识&#xff0c;这章主要讲 椭圆曲线 方程 2&#xff1a;椭圆曲线方程 y2axybyx3…
阅读更多...
知乎知+和信息流广告报价，知乎推广多少钱？

知乎知+和信息流广告报价，知乎推广多少钱？

知乎作为中国领先的问答社区&#xff0c;凭借其高质量的内容和庞大的用户群体&#xff0c;已成为众多品牌竞相追逐的营销高地。如何在知乎平台上精准投放广告&#xff0c;实现品牌价值的最大化&#xff0c;成为了众多企业面临的难题。云衔科技&#xff0c;作为数字化营销解决方…
阅读更多...
基于MATLAB的涡流函数方法案例+代码

基于MATLAB的涡流函数方法案例+代码

前言 这里介绍一下相关理论和代码----基于MATLAB使用伪谱离散化 三阶龙格库塔时间积分实现涡流函数方法的CFD案例 1. 代码详解 这段 MATLAB 代码实现了一个二维湍流模拟&#xff0c;使用伪谱法在周期性边界条件下解算非线性涡度-流函数方程&#xff1a; M 256; % number o…
阅读更多...
驱动开发系列14 - Wayland 详解

驱动开发系列14 - Wayland 详解

目录 一：概述 二：操作系统如何支持 Wayland 三：显卡驱动如何支持 Wayland 四：Wayland 协议介绍 一：概述 Wayland 是一种通信协议，规定了显示服务器与其客户端之间的通信，以及该协议的 C 语言库实现。使用 Wayland 协议的显示服务器称为 Wayland 合成器，因…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023