admin 管理员组

文章数量: 887017

Vue之模板语法(上)

1.1 插值

1.1.1 文本{{msg}}
1.1.2 html使用v-html指令用于输出html代码          
1.1.3 属性HTML属性中的值应使用v-bind指令
1.1.4 表达式Vue提供了完全的JavaScript表达式支持{{str.substr(0,6).toUpperCase()}}{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue插值案例</title><script src=".6.10/vue.js"></script></head><body><div id="app"><ul><li><h3>文本</h3>{{msg}}</li><li><h3>html字符串渲染</h3><div v-html="htmlStr"></div></li><li><h3>v-bind属性绑定指令</h3><input type="text" value="23" /><input type="text" v-bind:value="age" /></li><li><h3>表达式</h3>{{str.substr(0,6).toUpperCase()}}{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}<li v-bind:id="'list-' + id">我的Id是js动态生成的</li></li></ul></div></body><script type="text/javascript">new Vue({el: "#app",data: {msg: "hello vue!!!",htmlStr: '<span style="color: red;">红了</span>',age: 24,str:'',number:8,ok:true,id:23}});</script>
</html>

结果：

1.2 指令

指的是带有“v-”前缀的特殊属性
1.2.1 核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

本文标签： Vue之模板语法(上)

版权声明：本文标题：Vue之模板语法(上) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732357710h1534915.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。