v-text和v-html
v-text是渲染字符串，会覆盖原先的字符串
v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子
<div id="app">
<div>{{innerHtml}}</div>
<div v-text="innerHtml"></div>
<div v-html="innerHtml"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
innerHtml:'<button>一个按钮</button>'
}
})
</script>
v-bind
是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号里的内容会被当作js解析（只能解析变量或三元表达式），如下：
如果给属性值设置为一个变量，那么可以使用v-bind
可以缩写为:<属性>="<变量>"
<div id="app">
<!-- 完整写法 v-bind: -->
<div v-bind:class="className">"{{innerHtml}}"</div>
<!-- 缩写 : -->
<div :class="className">"{{innerHtml}}"</div>
<div v-text="innerHtml"></div>
<div v-html="innerHtml"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
innerHtml:'<button>一个按钮</button>',
className:'box'
}
})
</script>
v-on
v-on用于事件绑定
语法: v-on:<事件类型>="<函数名>"
简写：@<事件类型>="<函数名>"
<body>
<div id="app">
<!-- 完整写法 v-on: -->
<div v-on:click="clickfunc">点击事件</div>
<!-- 缩写 @ -->
<div @click="clickfunc">点击事件</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
methods:{
// 定义一个 点击函数
clickfunc:function(){
console.dir('click event')
}
},
})
</script>
v-model
数据双向绑定指令，限制在 <input>、<select>、<textarea>、components中使用
语法： v-model="<变量名>"
<body>
<div id="app">
<div>val的值:{{val}}</div>
<div>val的值:{{val}}</div>
<input v-model="val">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
val:'success'
}
})
</script>
版权声明：本文为ddf__原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。