目录
一、插值
①、文本
语法:{ {定义的变量}}
②、html
语法:
v-html="定义的变量"
③、属性绑定
语法:
<!-- 方法一 --> v-bind:value="定义的变量" <!-- 方法二 --> :value="定义的变量"
④、表达式
Vue提供了完全的JavaScript表达式支持
⑤、class绑定
语法:
:class="定义的变量"
⑥、style绑定
语法:
:style="定义的变量"
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <title></title> <style> .a{ color:yellow; } </style> </head> <body> <div id="app"> <p>文本</p> { {msg}} <hr /> <p>html页面转义</p> <div v-html="htmlstr"></div> <hr /> <p>v-bind 属性绑定</p> <input value="值"/> <input v-bind:value="valuestr"/> <input :value="valuestr"/> <hr /> <p>vue中可以对变量进行二次处理</p> { {str.substring(0,4)}} <br /> { {num+4}}<br /> { {ok ? '1' : '0'}}<br /> <span :id="idstr+'1'">书籍信息</span> <hr /> <p>class绑定</p> <span :class="calssStr">文本内容</span> <hr /> <p>style绑定</p> <span :style="styleStr">文本内容</span> </div> <script type="text/javascript"> new Vue({ el:"#app", data(){ return{ //文本 msg:'你好啊 云鹤衫!!', //html转义 htmlstr:'<span style="color:red;">文本内容</span>', //属性绑定 valuestr:'云鹤衫', //表达式 str:'hello world', num:6, ok:false, idstr:'book_', // class绑定 calssStr:'a', // style绑定 styleStr:'color:blue;' } } }) </script> </body> </html>
效果:
id绑定效果:
二、指令
简介ÿ