首页 > 其他分享 >VUE插值语法

VUE插值语法

时间:2023-04-03 18:56:25浏览次数:36  
标签:VUE name 插值 语法 game 使用 hobby 取值

目录

基本使用

在body中创建一个标签,一般使用div,定义好id后,在script中进行定义,在前台使用{{变量}}的形式进行调用,语法如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>文本: {{name}}</p>
    <p>数字: {{age}}</p>
    <p>列表: {{hobby}}  需要使用索引取值: {{hobby[0]}}</p>
    <p>字典: {{game}} 方法一:使用点的方式取值{{game.name}} 方法二:使用关键字取值{{game['publish']}}</p>
    <p>超链接: {{a_url}}</p>
    <p>运算: {{10*3+4*2}}</p>
    <p>三目运算符【条件?'符合结果':'不符合结果'】:{{10>9?'大于':'小于'}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'jsd',
            age: 19,
            hobby: ['抽烟', '喝酒', '烫头'],
            game: {'name': '塞尔达传说', 'publish': '任天堂'},
            a_url:'<a href="http://www.baidu.com">点我</a>',
        }
    })
</script>
</html>

image

标签:VUE,name,插值,语法,game,使用,hobby,取值
From: https://www.cnblogs.com/smyz/p/17284040.html

相关文章

  • 《c++徒步》基础语法篇
    trycatch原文链接:https://www.dotcpp.com/course/84语法结构:try{ //正常程序执行语句 throw(异常类型表达式);}catch(异常类型1){ //异常处理代码}catch(异常类型2){ //异常处理代码}catch(异常类型3){ //异常处理代码}//后续代码实例:#include<iostream......
  • 前端Vue项目打包性能优化方案
    一.前言Vue框架通过数据双向绑定和虚拟DOM技术,帮我们处理了前端开发中最脏最累的DOM操作部分,我们不再需要去考虑如何操作DOM以及如何最高效地操作DOM;但Vue项目中仍然存在项目首屏优化、Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项......
  • vue3适配移动端的登录实现
    <scriptlang="ts"setup>import{ref}from'vue'constPHONE_NUMBER_REGEX=/^1[0-9]{10}$/constVERIFICATION_CODE_REGEX=/^[0-9]{6}$/constLOGIN_ERROR_MESSAGE='登录失败,请检查网络连接并重试'constGENERATE_CODE_ERROR_MESSAGE......
  • vue 项目启动报错opensslErrorStack ERR_OSSL_EVP_UNSUPPORTED
     错误裁图  原因:node升级版本过高 解决办法:windows中在vscode里在命令行输入命令修改环境变量:$env:NODE_OPTIONS="--openssl-legacy-provider"再执行:npmrunserve  linux中exportNODE_OPTIONS=--openssl-legacy-provider  ......
  • Vue3 v-drag 拖拽指令的简单使用
    文档官网文档:https://www.npmjs.com/package/v-drag使用安装、引入npminstallv-drag--saveimportdragfrom"v-drag"使用直接使用:<divv-drag>Dragme!</div>注意:对原本绝对定位水平居中的div,其居中的实现方式应为:div{ position:absolute; left:50%; trans......
  • Vue2.0 学习 第二组 语法模板
    本笔记主要参考菜鸟教程和官方文档编写。1.文本绑定 一般在dom中用{{}}标时,并且在vue构造体内的data中定义文本内容 <divid="app">   <p>{{message}}</p> </div> <script> newVue({  el:'#app',   data:{   message:'HelloVue.js!' ......
  • Vue3 watch 监听函数
    1、watch函数(既要指明监视的属性,也要指明监视的回调)坑:1)监视reactive定义的响应式数据时:oldValue无法正确获取、强制开启了深度监视(deep配置失效)2)监视reactive定义的响应式数据中某个属性时:deep配置有效setup(){letsum=ref(0)letmsg=ref('ABCD')letp......
  • vue 实现锚点点位
    <template> <divclass="container"> <!--<el-row> <el-col:span="3">  <el-menu    default-active="2"    class="el-menu-vertical-demo"    @open="handleOpen&quo......
  • vue3路由跳转params传参接收不到
      这样路由可以跳转过去,但接收到了params是一个空对象。 解决方法由于之前的params传参在页面刷新之后,参数会丢失,所以vue将这种方法移除了。vue推荐的路由跳转传参方法:1.使用query传递参数2.使用vuex、pinia对参数进行存储3.使用HistoryAPI方式传递和接收  ......
  • vue3 ant-Design-vue提交按钮放在表单外提交,自定义提交按钮
    <template><a-formref="urlEditRef":model="urlEditInfo"name="urlEdit_rule"layout="vertical"><a-form-itemlabel="跳转链接"name="longUrl":rules=&qu......