关于小米
27岁，山西运城人，职业电商经理人，前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发，等相关电商工作，经验较为丰富，小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]
E-mail:mzze@163.com
Q Q:32362389
W X:xiaomi168527
关于王飞
27岁，山西运城人，职业电商经理人，网络工程师兼运维，从事过运营商网络建设，企业网络建设、优化。数据中心网络维护等通过，经验丰富，座右铭：当自己休息的时候，别忘了别人还在奔跑。 ...[更多]
关于小艳
大于花一样的年龄，河南郑州是我家，2010年在北京接触团购网，2011年进入天猫淘宝一待就是四年，如今已经将设计走向国际化（ps:误打误撞开始进入阿里巴巴国际站的设计，嘿嘿）五年电商设计，丰富经验，从事过天猫淘宝阿里各项设计，店铺运营，产品拍摄；我将我的经历与您分享是我的快乐！座右铭：越努力越幸运！ ...[更多]
E-mail:97157726@qq.com
Q Q:97157726
下面demo中使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值；
这种使用 {{}} 获取值得方式，叫做 插值 或 插值表达式
<body>
<div id="div">
{{user_name}}
</div>
</body>
// 两种引入方式，任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./vue.js"></script>
<script>
var app = new Vue({
el:'#div', // 设置要操作的元素
// 要替换的额数据
data:{
user_name:'我是一个div'
}
})
</script>数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示
<body>
<div id="div">
文本插值 {{html_str}}
</div>
</body>
<script>
var app = new Vue({
el:'#div',
data:{
html_str:'<h2>Vue<h2>'
}
})
</script>浏览器渲染结果：
<div id="div">文本插值 <h2>Vue<h2></div>
打开浏览器的 控制台的REPL 环境 输入 app.html_str = '<s>vue</s>'
浏览器渲染结果就会立刻发生改变： <div id="div">文本插值 <s>vue</s></div>
Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；
(表达式是运算，有结果；语句就是代码，可以没有结果)
<div id="app">
<!-- 插值 插值表达式 -->
<s>{{us}}</s>
<!-- 插值表达式可以使用运算符 支持三元运算符 -->
{{us>3?'大':'小'}}
<!-- 函数调用也可以 -->
{{hh()}}
<!-- 对象的调用 -->
{{obj.name}}
<!-- 但是不能写逻辑代码,如if -->
<!-- {{if(us>1){
console.log(1)
}else{
console.log(0)
}}} -->
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{
us:1,
hh:function(){
return 4+3;
},
obj:{
name:'李四'
}
}
});
// 打印
console.log(app);
</script>
本站内容均为小米原创，转载请注明出处：小米技术社区>> Vue.js中的插值(插值表达式)和使用JavaScript表达式