VUE 学习 之 {{}}

最新推荐文章于 2024-04-21 19:53:48 发布
最新推荐文章于 2024-04-21 19:53:48 发布
阅读量620 收藏 1
点赞数
分类专栏： VUE学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liubangbo/article/details/81009843
版权

VUE里面的{{}}符合可以书写JS表达式，但是不可以书写语句。例子：

 

 

<!DOCTYPE html>
<html>
<head>

    <title>VUE hello world</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <style>

        #simple{
            margin-left: 100px;
            margin-top: 100px;
            width: 100px;
            height: 100px;

            background-color: #00a9a7;
        }

    </style>

</head>


<body>

<div id="simple">
    <p>{{name}}</p>
    <p>{{isShow ? "show" : "hide"}}</p>
    <p>{{number1 + number2}}</p>
</div>


<script>
var simpleID = new Vue({
    el:"#simple",
    data:{
        name : "hello world",
        isShow : false,
        number1: 10,
        number2: 20
    }
})

    simpleID.number2 = 30;
</script>

</body>
</html>

 

夜跑者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习之路之登录注册实例代码
01-19
根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue ...
vue中{{}}
cmolong的博客
03-08 3万+
vue的{{ }}可以是 表达式 字符串 函数 正则表达式 boolean
Vue中的模板语法（包括{{}}、v-html、v-on、v-bind、{{js表达式}}）
qq_59541478的博客
09-25 625
这里的v-for是循环遍历的意思，遍历数组和对象的属性值然后通过{{}}将变量值渲染出来。它跟原生js中的innerhtml是一样的，用来解析代码片段或者解析字符串。也可以用@来代替，用来绑定事件。可以用：来代替，用来绑定变量。
vue3基本使用方式
最新发布
2302_77101581的博客
04-21 847
v-else-if 必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误。setup的意思是准备，它是在props、data、computed、methods 、生命周期函数之前运行的。条件渲染指令（v-show、v-if、v-else、v-else-if）组件中所用到的：数据、方法、生命周期等等，都可以配置在setup中。若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。v-text和{{}}表达式渲染数据，不解析标签。
【Vue】简单表达式
luobifeiyeshi0的博客
05-06 238
插值表达式{{}}，可以在前后插入一些内容，插值表达式可以进行一些简单的字符串。不同点：v-text 不会解析富文本；v-html 可以解析富文本。4.key在使用v-for的时候都需要去设置key。v-model 数据双向绑定，绑定的是表单控件。v-bind 元素的属性绑定，简写 “ ：”key只能是字符串或数字，key必须是唯一的。v-show设置display:none。v-on 事件的绑定，简写“ @ ”频繁切换的时候可以使用v-show。只修改一次的时候可以使用v-if。
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
weixin_65100963的博客
05-04 947
vue脚手架_基础API 安装：vue-devtools 学习和调试vue必备之利器 - 官方插件 安装： 打开Chrome浏览器 =>点击浏览器右上角小图标，按图示操作 2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装 3.安装完成后，固定显示插件 Vue基本概念 Vue是什么 vue是一个渐进式的javascript框架 库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大
vue的模板语法 {{ }} 和 v- 指令
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
08-13 2835
1.模板语法(插值语法) 2.v-if v-else-if v-else 指令 (是否渲染) 3.v-show 指令 (是否显示) 4.v-on 指令 简写(@)(绑定methods里面的事件) 5.v-blind 简写(:) 语法v-blind:属性='属性值' 绑定类名(class)和属性(style) 6.v-model (数据双向绑定) 7.v-for 遍历渲染数据 8.v-html 和 v-text 给标签添加内容 9.事件修饰符 10.按键修饰符......
Vue学习笔记——基础语法{{ }}
weixin_44154577的博客
03-04 6137
Vue学习笔记 {{ }}大括号，也是最常用的取值符号，用来渲染data里面的数据 <body> <div id="app"> {{message}} <H2>{{people.name}} {{people.sno}}</H2> <ul> <li>{{campus[0]}}</li> <li>{{campus[1]}}</li> <li>{{c
VueJS表达式
qq_36194388的博客
08-02 828
表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中 表达式语法 VueJS表达式写在双大括号内：{{ expression }}。 VueJS表达式把数据绑定到 HTML。 VueJS将在表达式书写的位置"输出"数据。 VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。 简单表达式 在{{ }}中可以进行简单的运算 <div
Vue学习之常用指令实例详解
12-29
本文实例讲述了Vue常用指令。分享给大家供大家参考，具体如下： 1、创建一个vue实例 vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先...
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
vue学习之Vue-Router用法实例分析
11-28
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考，具体如下： Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击它可以在中将相应的组件渲染出来。 1、使用vue-router的...
Vue学习之组件用法实例详解
10-15
主要介绍了Vue学习之组件用法,结合实例形式分析了vue.js组件的使用流程、模板、父子组件、插槽slot等相关原理与操作技巧,需要的朋友可以参考下
vue指令学习——vue基本用法
qq_46153157的博客
05-08 1441
vue的基本使用，放心食用哈哈哈哈我会继续努力更新的
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
尚硅谷-谷粒商城P44Vue模板
weixin_44829804的博客
09-18 992
配置模板 <template> <div></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { /
vue指令--插值表达式{{}}
jyn15159的博客
12-11 7731
vue指令——插值表达式{{}} 基本使用 vue中，使用{{}}双花括号，在html标签的“内容区域”中表现数据，这个技术称为插值表达式。 语法： <标签> {{ 表达式 }} </标签> <div> {{ city }} </div> 表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等。 在JavaScript中，有返回实在信息的是表达式，没有返回实在信息(undefined)的是语句。 使用示例： <div id
谈谈key的唯一性特殊处理
Front小思的博客
06-17 956
通常： key 管理可复用的元素，key给每个vnode的唯一id，可以依靠key，更准确、更快拿到oldVnode中对应的vnode节点 。 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。 为了给 Vue 一个提示，以便它
Vue官网学习（模板语法：一、{{}}双大括号语法）
CoderOu
06-23 1万+
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 这是官网对模板的介绍，今天就来学习一下Vue的模板语法： 1、文本“Mustache”语法 (双大括号) <span>Messa.
vue学习-vue入门
08-25
如果你想学习 Vue.js 并入门的话，以下是一些步骤和资源可以帮助你开始： 1. 首先，确保你已经安装了 Node.js。你可以在官方网站上下载并按照指示进行安装。 2. 之后，你可以使用 Vue 的官方脚手架工具 Vue CLI 来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值