1、if,else:
<body>
<div id ="app">
<!-- 复杂判断还是推荐使用computed计算 -->
<h2 v-if="score >= 90">
<div>优秀</div>
</h2>
<h2 v-else-if="score >= 60">
<div>良好</div>
</h2>
<h2 v-else>
<div>不及格</div>
</h2>
{{message}}
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
message: 'Smallstars',
isShow: true,
score: 95
},
methods: {},
computed: {},
});
</script>
</body>
2、条件渲染：
<body>
<div id ="app">
<!-- 如果没有用key标识，会复用输入框，内容不会清空，key值设置需不同才行 -->
<span v-if="isUser">
<label for="username">用户账户</label>
<input type="text" id="username" placeholder="用户账户" key="username">
</span>
<span v-else="">
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱" key="emil">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
message: 'Smallstars',
isUser: true
},
methods: {},
computed: {},
});
</script>
</body>
2、v-show: 多次隐藏使用
<body>
<div id ="app">
<!--
v-if: 当条件为 false 对应元素根本不存在dom中
v-show: 当条件为 false 只是隐藏，内样式改为: display: none
-->
<h2 v-if="isShow" id="a1">{{message}}</h2>
<h2 v-show="isShow" id="a2">{{message}}</h2>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
message: 'Smallstars',
isShow: true
},
methods: {},
computed: {},
});
</script>
</body>
3、响应函数和不响应操作
<body>
<div id ="app">
<ul>
<li v-for="value in letters">{{value}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script>
//创建Vue实例,得到 ViewModel
const vm = new Vue({
el: '#app',
data: {
letters: ['a', 'c', 'b', 'd']
},
methods: {
btnClick(){
//1、在最后添加元素
// this.letters.push('s')
//2、在前面添加元素
// this.letters.unshift('s')
//3、在最后删除元素
// this.letters.pop()
//4、在最前面删除元素
// this.letters.shift()
// 5、排序
// this.letters.sort()
// 6、反转
// this.letters.reverse()
// 7、splice
// 删除元素：(start, length)
// 替换元素：(start, length, values)
// 插入元素：(start, 0, values)
// this.letters.splice(1, 2)
// this.letters.splice(1, 2, 'e', 'f')
// this.letters.splice(1, 0, 'e', 'f')
// 非响应式:不会刷新，但是在Console中可以查看到值已经改变
// this.letters[0] = 'h'
// 可以用以下两种方式达到上式响应式的功能
// this.letters.splice(1, 1, 'h')
// set(object, index, value)
// Vue.set(this.letters, 1, 'h')
}
},
computed: {},
});
</script>
</body>