Vue.js模板语法
插值文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
<div id="app">
<p>{{ message }}</p>
</div>
HTML
使用 v-html 指令用于输出 html 代码:
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>小鲸喜</h1>'
}
})
</script>
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 use 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
use: false
}
});
</script>
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
message: 'RUNOOB'
}
})
</script>
v-model双向数据绑定
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
v-if
v-if 指令将根据表达式 set的值(true 或 false )来决定是否显示这个div
<div id="app">
<div v-if="set">{{msg}} if</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
set:false,
msg:"这个方法是"
}
})
</script>
v-show
我们也可以使用 v-show 指令来根据条件展示元素:
<div id="app">
<div v-show="set">{{msg}} show</div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
set:false,
msg:"这个方法是"
}
})
</script>
v-for 循环语句
v-for 指令需要以 site in sites 形式的特殊语法,
sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(it,index) in arr">
{{ index+1 }}城市:{{ it }}
</li>
</ul>
<h2 v-for="item in vegetables" v-bind:title="item.name">
{{ item.name }}
</h2>
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["北京","上海","广州","深圳"],
vegetables:[
{name:"西兰花炒蛋"},
{name:"蛋炒西蓝花"}
]
},
methods: {
add:function(){
this.vegetables.push({ name:"花菜炒蛋" });
},
remove:function(){
this.vegetables.shift();
}
},
})
</script>