Vue模板语法
• 双大括号:{
{ }}
• v-html
• v-bind
<template>
<div>
<h1>学习Vue:模板语法</h1>
<h2>{
{message}}</h2>
<div v-html="html"></div>
<div :id="myid">v-bind修饰属性(使属性值变成动态),它可以缩写成":"</div>
</div>
</template>
<script>
export default {
data() {
return {
message: "双花括号文本赋值",
html: "<a href='https://www.csdn.net'>(v-html渲染动态标签)csdn</a>",
myid: 1
}
}
}
</script>
Vue条件渲染
• v-if
• v-else(v-if的延申指令)
• v-show
<template>
<div>
<div v-if="flag">v-if:条件渲染(只会在flag返回true的时候被渲染)</div>
<div v-else="flag">v-else:条件渲染(只会在flag返回false的时候被渲染)</div>
<!-- v-if:如果返回值为false,它不会渲染元素,而v-show:一定会渲染元素,返回值为false时只会隐藏
所以如果需要频繁切换,一般使用v-show -->
<div v-show="flag2">v-show:条件渲染(只会在flag2返回true的时候被渲染)</div>
</div>
</template>
<script>
export default {
data() {
return {
flag:false,
flag2:true
}
}
}
</script>
Vue列表渲染
• v-for
<template>
<div>
<!--
items:return里面定义好的数组名
item: 数组里面的一块元素,比如:
‘{id: 1,name:"11"}’
-->
<!-- 简单的写法 -->
<div v-for="item in items ">{
{item.name}}</div>
<!-- 规范的写法 -->
<!-- key属性可以避免数据混乱的情况出现,提高渲染性能-->
<div v-for="(item,index) in items " :key="item.id">{
{item.name}}</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [{
id: 1,
name: "11"
}, {
id: 2,
name: "22"
},
{
id: 3,
name: "33"
}
]
}
}
}
</script>
Vue事件处理
• v-on
<template>
<div>
<!-- v-on一般简写成 @【一般用来监听函数触发事件】-->
<button v-on:click="gonum()">get</button>
<button @click="genum(0)">get</button>
{
{num}}
</div>
</template>
<script>
export default {
data() {
return {
num:0
}
},
methods:{
gonum(){
// “this.”用来读取data里面的值
this.num++
},
//a:表示输入的参数,可以输入多个
genum(a){
this.num=a
}
}
}
</script>
Vue表单绑定输入
• v-model
只适用于 、(选择列表)、 (多行文本输入)
表单绑定修饰符:
.lazy:在失去焦点或者回车时触发
.trim:自动过滤用户输入的首尾空格
<template>
<div>
<!-- v-model:双向数据绑定,即时传值 -->
<input v-model="name" />
<button @click="namego()">点击</button>
<P>{
{name}}</P>
</div>
</template>
<script>
export default {
data() {
return {
name: "输入",
}
},
methods: {
namego() {
this.name = "no"
}
}
}
</script>