vue指令
程序员文章站
2022-05-15 17:42:04
...
1. v-html
输出html指令
<!--v-html指令-->
<div id="app">
<div v-html="message"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message:'<h1>test</h1>'
},
})
</script>
2. v-bind指令与v-model指令
< h1 v-bind:class="{‘class1’:select}"> 可以缩写
< h1 :class="{‘class1’:select}">
v-model指令实现双向绑定
<style>
.class1{
color:red;
background: black;
}
</style>
<body>
<!--v-bind指令-->
<div id="app">
<label for='checkbox'>修改颜色</label>
<input type="checkbox" id='checkbox' v-model="select">
<h1 v-bind:class="{'class1':select}">test</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
select:false
},
})
</script>
</body>
3.v-if指令
判断逻辑
<body>
<!--v-if指令-->
<div id="app">
<h1 v-if="s1">test</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
s1:false
},
})
</script>
</body>
4.v-on指令
事件处理
< h1 v-on:click=“some”>test可以缩写
< h1 @click=“some”>test
<body>
<!--v-on指令-->
<div id="app">
<h1 v-on:click="some">test</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
some: function(){
alert('test');
}
}
})
</script>
</body>
5.filters过滤器
<body>
<!--filter过滤器-->
<div id="app">
{{ text1 | capitalize }}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
text1: 'test'
},
filters: {
capitalize: function (value){
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
})
</script>
</body>
上一篇： linux中常用缩写
下一篇： JS封装大额数值缩写为k、w函数