目录
v-html
设置元素的innerHTML
<body>
<div id="app">
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: `<a href='http://www.baidu.com'>aa</a>`
}
})
</script>
</body>
v-show和v-if
控制元素显示隐藏
v-show='表达式' true为显示，false为隐藏
原理：切换display:none控制显示隐藏
v-if='表达式' true为显示，false为隐藏 渲染隐藏
原理：基于条件判断，是否创建或移除元素节点
v-else和v-else-if
辅助v-if进行判断渲染
v-on
作用：注册事件 = 添加监听+提供处理逻辑
语法：
v-on:事件名 = ''内联语句"
v-on:事件名='methods的函数名'
v-on:事件名 = ''内联语句"
<div id="app">
<button v-on:click="count--">-</button>
<span>{{count}}</span>
<button v-on:click="count++">+</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100
}
})
</script>
实现点击+号数字加1，点击-号数字减1
可以简写成：@事件名
@click="count++"
v-on:事件名='methods的函数名'
第二种写法实现，点击切换显示
<div id="app">
<button @click="fn">切换显示隐藏</button>
<h1 v-show="isShow">okokok</h1>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn() {
this.isShow = !this.isShow
}
}
})
</script>
v-bind
作用:动态的设置html的标签属性
语法：v-bind:属性名="表达式"(src,title)
简写:v-bind:src可以简写成 :src
v-for
作用:基于数据循环，多次渲染整个元素
遍历数组语法:
v-for="(item,index) in 数组"
其中item是元素，index是下标
<div id="app">
<ul>
<li v-for="(item,index) in list">
{{item}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
list: ['西瓜', '草莓', '香蕉']
}
})
</script>v-for中的key
作用：给列表项添加的唯一标识。便于Vue进行列表正确的排序复用
语法：key属性 = "唯一标识"
注意：
- key的值只能是字符串或数字类型
- key的值必须具有唯一性
- 推荐使用id作为key，不推荐使用index作为key
v-model
作用：给表单元素使用，双向数据绑定，可以快速获取或设置表单元素内容
数据变化，视图自动更新。视图变化，数据自动更新
语法:v-model = '变量'
<div id="app">
账户:<input type="text" v-model="username"><br><br>
密码:<input type="password" v-model="password"><br><br>
<button @click="login">登陆</button>
<button @click="reset">重置</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log(this.username, this.password);
},
reset() {
this.username = '',
this.password = ''
}
}
})
</script>