Vue语法学习第一课——插值
学习关于Vue的插值语法
① 文本值 :
"Mustache"语法,即双大括号
<span>Message:{{msg}}</span>
注:双大括号中的msg值改变,插入的内容也会随之改变,可通过v-once指令限制,但会影响该节点上其他的数据绑定
v-once 例:(只会第一次渲染,之后修改myname也不会改变v-once中的值)
<div id="app0">
<input type="text" v-model="myname"/>
<p v-once>
my name is : {{myname}}
</p>
</div> <script>
var vm = new Vue({
el:"#app0",
data:{
myname : "zxq"
}
});
</script>
② 原生HTML :
① 中的双大括号语法会将数据解释为普通文本,当我们为了输出HTML时,应该使用v-html指令
<p>Using Mustaches : {{rawHtml}}</p> <p>Using v-html directive : <span v-html = "rawHtml"></span></p>
注:v-html 会直接作为HTML,会忽略解析属性值中的数据绑定,即不能使用v-html符合局部模板
③ 特性 :
双大括号不能作用在HTML特性上,需要使用v-bind指令
<button v-bind:disabled="isButtonDisabled">Button</button>
注:布尔特性在html中存在即暗示为true,但在v-bind中,如果disabled为null/undefined/false,则该属性甚至不会包含在渲染出来的<button>元素中
④ JavaScript 表达式:
{{ number + 1 }}
{{ OK ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind=" 'list-' + id "></div>
这些表达式会在所属的Vue实例的数据作用域下作为JavaScript被解析
注:每个绑定只能包含单个表达式,下面的例子不会生效
{{ var a = 1 }} <!-- 这是语句,不是JavaScript表达式 --> {{ if( OK ) { return message } }} <!-- 控制流不会生效,请使用三元表达式 -->
只能访问全局变量的白名单,如Math、Date。不能在模板表达式中访问用户自定义的全局变量
——————————————————————————————————————————————————————————————
Vue.js官方文档 : https://cn.vuejs.org/v2/guide/
Vue语法学习第一课——插值的更多相关文章
- Vue语法学习第二课——指令
指令,是指在Vue中,带有-v前缀的特殊特性 指令特性的值预期是单个JavaScript表达式(v-for例外) <p v-if="seen">看得到</p> ...
- Magento学习第一课——目录结构介绍
Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...
- Elasticsearch7.X 入门学习第一课笔记----基本概念
原文:Elasticsearch7.X 入门学习第一课笔记----基本概念 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https: ...
- MFC学习-第一课 MFC运行机制
最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...
- python学习第一课
第一课: 1.不要使用来路不明的软件 2.下载杀毒软件 3.不懂技术的人在技术人面前会显得愈发无知 4.python无所不能 需要掌握的知识: 1.python基本语法 2.文件处理 3.函数 4.模 ...
- python学习第一课要点记录
写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...
- Vue语法学习第四课(2)——class与style的绑定
之前学到的指令 v-bind 在用于绑定class和style时,表达式结果可以是字符串.数组.对象. 一.绑定HTMLClass ① 对象语法 <div class="static& ...
- Vue语法学习第五课——条件渲染
① v-if .v-else-if .v-else <div v-if="type === 'A'"> A </div> <div v-else-if ...
- Vue语法学习第四课(1)——组件简单示例
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例. 设法将应用分割成了两个更小的单元.子单元通过 prop 接口与父单元进行了良好的解耦. <div id="ap ...
随机推荐
- HTML5本地存储之本地数据库篇
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
- ZT: C#不建类直接Json解析与取值
C#不建类直接Json解析与取值 2017年10月19日 15:58:22 圆圆娃哈哈 阅读数:701 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn. ...
- webpack学习笔记 (一)
一.安装nodejs: 点击打开nodejs官方站点: 点击下图框住的按钮,下周nodejs安装包: 安装下载好的安装包. 安装完毕之后,在cmd中输入node -v查看是否已经安装成功 如果有版本 ...
- 论文阅读-attention-is-all-you-need
1结构介绍 是一个seq2seq的任务模型,将输入的时间序列转化为输出的时间序列. 有encoder和decoder两个模块,分别用于编码和解码,结合时是将编码的最后一个输出 当做 解码的第一个模块的 ...
- python kline
# -*- coding: utf-8 -*- # Qt相关和十字光标 from qtpy.QtGui import * from qtpy.QtCore import * from qtpy imp ...
- spring boot2.0(一 ) 基础环境搭建
1.基础配置 开发环境:window jdk版本:1.8(spring boot2.0最低要求1.8) 开发工具:eclipse 构建方式:maven3 2.POM配置文件 <project x ...
- SWUST OJ(1035)
定位顺序表中最大和最小值 #include<iostream> #include<cstdlib> using namespace std; int main(int argc ...
- 上海高校程序设计联赛 D-CSL的字符串 栈模拟
题目链接:https://ac.nowcoder.com/acm/contest/551/D ASCII码表示的字符转换成整数实测不超过200(具体多少懒得查了) 分析:要求总的字典序最小,那就让最小 ...
- ASP.NET MVC 目录介绍
- myEclipse和eclipse从debug视图自动跳回default视图。
本来是吐槽文,找到了解决的插件,就改改标题了. debug的时候,可以从default视图自动跳转到debug视图,退出debug的时候,却不能自动切换回default视图. https://bugs ...