作者：最棒的寒冬腊月_531 | 来源：互联网 | 2023-09-25 14:00
Vue.js基本语法v-bind操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute，所以我们可以用v-bindv-bind简写:
Vue.js基本语法
v-bind
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind
v-bind简写:
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Titletitle><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11">script><script>var vm;window.onload = function () {vm = new Vue({el: "#app",data: {message: "qwe,vue!",}})}script>
head><body>
<div id="app"><span v-bind:title="message">测试title悬停事件span>
div>
body>
html>
v-bind被称为指令。指令带有前缀v-，以表示他们是Vue提供的特殊特性，这里的意思就是说，将这个元素节点的title特性和Vue实例的message属性保持一致
v-if、v-elsif、v-else
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Titletitle><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11">script><script>var vm;window.onload = function () {vm = new Vue({el: "#app",data: {flag: true,type: "A"}})}script>
head><body>
<div id="app"><span v-if="flag">真span><span v-else>假span><span v-if="type==='A'">AAAspan><span v-else-if="type==='B'">BBBspan><span v-else>CCCspan>div>
body>
html>
v-for
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Titletitle><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11">script><script>var vm;window.onload = function () {vm = new Vue({el: "#app",data: {items:[{message:'bootstrap'},{message:'vue'},]}})}script>
head><body>
<div id="app"><li v-for="item in items">{{item.message}}li>
<hr/><li v-for="(item, index) in items">{{index}}-{{item.message}}li>
div>
body>
html>
京公网安备 11010802041100号