vue.js基础-模板语法-插值
来源:互联网 发布:博然视频监控 软件 编辑:程序博客网 时间:2024/06/10 06:09
插值
文本:
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:
<span>Message: {{ msg }}</span>
{{msg}}将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:
<span v-once>这里的内容将不会改变: {{ msg }}</span>
纯HTML:
双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令:
<div v-html="rawHtml"></div>
这个 div 的内容将会被替换成为属性值 rawHtml,直接作为 HTML —— 数据绑定会被忽略。
属性:使用 v-bind 指令绑定属性。
<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
//当isButtonDisabled为true时,标签含有disabled属性,当isButtonDisabled为false时,disabled属性被移除<button v-bind:disabled="isButtonDisabled">Button</button>
使用 JavaScript 表达式
Vue.js 提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
每个绑定都只能包含单个表达式,多个则不生效
阅读全文
0 0
- vue.js基础-模板语法-插值
- vue笔记---模板语法-插值
- vue.js基础-模板语法-指令
- Vue.js插值
- Vue 基础模板语法
- Vue基础(模板语法)
- Vue基础之Vue模板语法
- Vue.js教程2-模板语法
- Vue.js 官方文档摘记:模板语法
- Vue--基础模板语法以及计算属性
- Vue.js 学习(3) -- 语法基础
- VUE插值
- Vue模板语法
- vue模板语法
- Vue模板语法
- Vue的模板语法
- vue一.模板语法
- Vue模板语法(2)
- Java面试
- 每日一题(4)—— (a ^ b << 2)
- Docker的常用操作指令
- 安装总结
- Android网络加载图片universal-image-loader的工具类以及Glide使用
- vue.js基础-模板语法-插值
- Android事件分发(3)--ViewGroup源码分析
- 过河问题
- C++ this 指针详解
- 面向对象语言的五个基本特征
- Java中String和byte[]间的转换浅析
- .Net使用DES解密发生“数据不正确”的错误
- MLMA 运输方式打印装袋标签
- c++读取文件中字符,不过滤空白符