前端框架技术

前端框架技术

前端框架技术

学校: 无

问题 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>

选项:

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