中国大学MOOC前端框架技术作业答案

前端框架技术

学校: 无

问题 1: 1. <template>
________________
template>
<script>
import { ref } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const message = ref('Hello World!')
return {
message
}
}
}
script>


请在上面空处补充代码，将 数据message 的值（Hello World!）渲染到此处

选项:

答案: {{message}}

问题 2: 1. 请在红色下划线填空处完成双向绑定代码（将用户的输入和brand的值绑定到一起）：
<template>
<p>请输入你最喜欢的民族品牌:<input type="text" __________________ />p>
<h3>你输入的民族品牌是:{{ brand }}h3>
template>
<script>
import { ref } from 'vue'
export default {
name: 'v-model-test',
setup() {
const brand = ref('')
return {
brand
}
}
}
script>

选项:

答案: v-mode="brand"

问题 3: 2. 请在红色下划线填空处运用计算属性computed实现总金额（本金+利息）的计算。
<template>
<p><span>输入存款金额:span><input type="text" v-model="amount" />p>
<p><span>输入当前总利息:span><input type="text" v-model="interestPayment" />p>
<hr />
<p><span>当前本息和:span>{{ totalMoney }}p>
template>
<script>
import { computed, ref } from 'vue'
export default {
name: 'ComputedTest',
data() {
const amount = ref(10000)
const interestPayment = ref(200)
const totalMoney = ______________________________________________;
return {
amount,
interestPayment,
totalMoney
}
}
}
script>

选项:

答案: computed(function(){return amount.value+interestPayment.value})

问题 4: 1. 请在下划线填空处补充代码完成对amount数据的变化监听，监听到变化后执行：alert('您的存款金额变化了')
<template>
<h2>状态监听应用h2>
<p>请输入存款金额:<input type="text" v-model="amount" />p>
<p>你输入的存款金额为:{{ amount }}p>
template>
<script>
import { ref, watch } from 'vue'
export default {
name: 'ComputedTest',
data() {
const amount = ref(0)
watch(________________________________________)
return {
amount
}
}
}
script>

选项:

答案: amount,function(){
alert("您的存款金额变化了")
}

问题 5: 2. 请在下划线填空处补充代码用条件渲染指令v-if v-else实现登录注册组件切换渲染


<template>
<div class="tabs">
<span :class="['tab-item', currentView == 'Login' && 'active']" @click="toggleView('Login')">登录span>
<span :class="['tab-item', currentView == 'Register' && 'active']" @click="toggleView('Register')">注册span>
div>
<div class=" tab-content">
________________________________________________
div>
template>
<script>
import { ref } from 'vue'
import Login from './Login.vue'
import Register from './Register.vue'
export default {
name: '',
components: {
Login,
Register
},
setup() {
const currentView = ref('Login')
const toggleView = function (viewName) {
currentView.value = viewName
}
return {
currentView,
toggleView
}
}
}
script>

选项:

答案: 无信息

问题 6: 3. 请在红色下划线填空处补充代码实现图片列表数据imgs中的图片渲染


<template>
<div>
<div v-for="(item, index) in __________" :key="_________">
<p>
<img :src="__________" />
p>
<p>___________p>
div>
div>
template>
<script>
import { reactive, ref, toRefs } from 'vue'
import imgOne from '../assets/one.png'
import imgTwo from '../assets/two.png'
import imgThree from '../assets/three.png'
export default {
name: 'TestVFor',
setup() {
const imgs = ref([imgOne, imgTwo, imgThree])
return {
imgs
}
}
}
script>

选项:

答案: imgs

问题 7: 1. 请在下划线填空处补充代码用动态组件component实现登录注册组件切换渲染


<template>
<div class="tabs">
<span :class="['tab-item', currentView == 'Login' && 'active']" @click="toggleView('Login')">登录span>
<span :class="['tab-item', currentView == 'Register' && 'active']" @click="toggleView('Register')">注册span>
div>
<div class=" tab-content">
________________________________________________
div>
template>
<script>
import { ref } from 'vue'
import Login from './Login.vue'
import Register from './Register.vue'
export default {
name: '',
components: {
Login,
Register
},
setup() {
const currentView = ref('Login')
const toggleView = function (viewName) {
currentView.value = viewName
}
return {
currentView,
toggleView
}
}
}
script>

选项:

答案: 请关注公众号【渝开搜题】查看答案